как встроить окно поиска с другими элементами в navbar? - PullRequest
Новая
       0

как встроить окно поиска с другими элементами в navbar?

0 голосов
/ 01 марта 2020

Я пытаюсь встроить окно поиска при уменьшении размера страницы с остальными элементами, я хочу добиться чего-то вроде этого

вместо этого я получаю это enter image description here

вот мой HTML код 

 <nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class=" navbar-header">
            <!-- button to put the list inside of-->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">logo</a>
        </div>

        <form class="navbar-form navbar-left" action="/action_page.php">
            <div class="input-group ">
                <input type="text" class="form-control" placeholder="Search">
                <div class="input-group-btn">
                    <button class="btn btn-default" type="submit">
                        <i class="glyphicon glyphicon-search"></i>
                    </button>
                </div>
            </div>
        </form>
        <div class="collapse navbar-collapse" id="myNavbar">
            <!--puting the pages inside the button-->
            <ul class="nav navbar-nav navbar-right">
                <!--puting the pages on the right side-->
                <li><a href="#">Home</a></li>
                <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span
                            class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <!--making another drop down list under one of the pages -->
                        <li><a href="#">Page 1-1</a></li>
                        <li><a href="#">Page 1-2</a></li>
                    </ul>
                <li><a href="#">Page 2</a></li>
            </ul>   
        </div>
    </div>
</nav>

, когда я помещаю его в мобильный вид, он отображается положенным, когда я возвращаюсь к обычному виду окна поиска исчезнуть 

.navbar-form {
padding: 10px 15px;
margin-right: -15px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
margin-top: -58px;
margin-bottom: 8px;

}

...