Bootstrap v3.3.7 Уставка NavBar по ширине

Question

Я не закаленный пользователь Bootstrap и я столкнулся со следующей проблемой:

<header class="header"> 
    <nav class="primary-nav navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
     <button class="navbar-toggle" data-target="#primary-nav" data-toggle="collapse" type="button"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="index.html">Hello</a> 
     </div> 
     <div class="collapse navbar-collapse" id="primary-nav"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="index.html">Welcome</a></li> 
      <li><a href="#">Foo</a></li> 
      <li><a href="#">Bar</a></li> 
     </ul> 
     <form class="search navbar-form navbar-right" role="search"> 
      <div class="form-group"> 
      <label class="has-clear"> 
       <input autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control" id="search-input" placeholder="Search..." type="text"> 
       <span aria-hidden="true" class="form-control-clear glyphicon " id="clear-search"></span> 
      </label> 
      </div> 
     </form> 
     </div> 
    </div> 
    </nav> 
</header> 

Смотрите компаньон codepen.

С этой довольно тривиальной установки NavBar, есть две вещи, которые у меня есть трудности коррекции:

1. Я не понимаю, почему мне нужно пользовательские CSS, чтобы избавиться от поиска короба margin-bottom, IMHO запас начальной загрузки CSS должен справиться с этим, но, возможно, я сделал ошибку
2. я не мог найти способ надежно сделать вход поиска заполнить ширину NavBar без указания абсолютной ширины в пикс

Хотя я могу управлять 1., я не могу добиться правильного поведения для входа в навигационную панель, которая должна иметь полную ширину и исчезнуть, когда появится меню «гамбургер».

Заранее за вашу помощь.

Answer 1

использовать этот CSS

#search-input{ 
 
    width: 100px;//specify width according to your requirement 
 
}

Answer 2

визуализировать его в полноэкранном режиме

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<header> 
 
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container-fluid"> 
 

 
     <div class="navbar-header"> 
 
     <button class="navbar-toggle" data-target="#primary-nav" data-toggle="collapse" type="button"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="index.html">Hello</a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="primary-nav"> 
 

 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="active"><a href="index.html">Welcome</a> 
 
      </li> 
 
      <li><a href="#">Foo</a> 
 
      </li> 
 
      <li><a href="#">Bar</a> 
 
      </li> 
 
     </ul> 
 

 
     <form class="navbar-form" role="search"> 
 
      <div class="form-group" style="display:inline;"> 
 
      <div class="input-group" style="display:table;"> 
 
       <input autocapitalize="off" autocomplete="off" autocorrect="off" class="form-control" id="search-input" placeholder="Search..." type="text"> 
 
       <span class="input-group-addon" style="width:1%;"><span class="glyphicon glyphicon-search"></span></span> 
 
      </div> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header>