Bootstrap переключение верхнего меню с помощью панели поиска - PullRequest
Новая
       27

Bootstrap переключение верхнего меню с помощью панели поиска

0 голосов
/ 21 января 2020

Я пытаюсь добавить строку поиска / панель в верхнюю строку меню, которую можно переключать. Базовая c часть меню такова: 

<div class="navbar navbar-default navbar-fixed-top">
 <div class="navbar-header"><a class="navbar-brand" href="#">Mobile</a>
      <a href="#mN" class="navbar-toggle" data-toggle="collapse" data-target="#mN">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>

    <div class="navbar-collapse collapse" id="mN">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
      </ul>
    </div>
</div>

В частности, я хочу заменить <a class="navbar-brand" href="#">Mobile</a> строкой поиска. Код моей строки поиска: 

            <div id="imaginary_container"> 
                <div class="input-group stylish-input-group">
                    <span class="input-group-addon">
                        <button id="query" type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>  
                    </span>
                    <input type="text" id="myInputTextField" class="form-control"  placeholder="Search" autofocus>
                    <span class="input-group-addon">
                        <button id="reset" type="submit">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>  
                    </span>
                </div>
            </div>

Прямая замена двух частей кодовых наборов окна поиска и значка humberger на две строки, которых я хочу избежать. Я попытался использовать <row> div, но безуспешно, как здесь: 


<div class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <div class="row">
            <div class="col-sm-6">

            <div id="imaginary_container"> 
                <div class="input-group stylish-input-group">
                    <span class="input-group-addon">
                        <button id="query" type="submit">
                            <span class="glyphicon glyphicon-search"></span>
                        </button>  
                    </span>
                    <input type="text" id="myInputTextField" class="form-control"  placeholder="Search" autofocus>
                    <span class="input-group-addon">
                        <button id="reset" type="submit">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>  
                    </span>
                </div>
            </div>


            </div>
            <div class="col-sm-6">
                <a href="#mN" class="navbar-toggle" data-toggle="collapse" data-target="#mN">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
              </a>
            </div>
        </div>
    </div>


    <div class="navbar-collapse collapse" id="mN">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">More</a></li>
        <li><a href="#">Options</a></li>
      </ul>
    </div>
</div>

Любое предложение?

...