CSS Bootstrap navbar-center панель поиска, которая занимает всю ширину при обрушении

Question

У меня есть загрузочный v.3 navbar с 3 элементами в нем. Я хотел бы выравнивать элементы равномерно, чтобы панель поиска была центрирована на панели навигации. И когда он разрушается, он принимает полный widht. Но изо всех сил пытаюсь это сделать.

Это HTML для него:

 <nav class="navbar navbar-transparent navbar-fixed-top" role="navigation"> 

     <div class="container"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="col-lg-4 navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <img src="assets/img/logo.png" alt="logo"> 
      </div> 

      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <form class="navbar-form navbar-left navbar-search-form active" role="search"> 
       <div class="form-group"> 
        <input type="text" value="" class="form-control" placeholder="Search..."> 
       </div> 
      </form> 
        <ul class="nav navbar-nav"> 
       <li class="active"> 
        <a href="javascript:void(0);"><i class="fa fa-search"></i></a> 
       </li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li> 
      </ul> 

      </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
     </nav> 

Я попытался сделать fiddle для него, но это не получилось хорошо, но, надеюсь, код может дать некоторое представление.

Answer 1

Вы можете достичь того же, без гибкого и CSS3 свойств с некоторыми простыми ухищрений.

Проверить Демо HERE

Попробуйте

HTML:

<nav class="navbar navbar-transparent navbar-fixed-top" role="navigation"> 

    <div class="container"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 

     <img class="logo" src="//placehold.it/50x50" alt="logo"> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <form class="navbar-form navbar-search-form active" role="search"> 
     <div class="form-group"> 
      <div class="input-group"> 
      <input type="text" class="form-control" placeholder="Search for..."> 
      <span class="input-group-btn"> 
     <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> 
     </span> 
      </div> 
     </div> 
     </form> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li> 
     </ul> 

    </div> 
    <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container-fluid --> 
</nav> 

CSS:

body { 
    background-color: #ddd; 
} 

.navbar { 
    border: 1px solid #ccc; 
} 

.navbar-toggle .icon-bar { 
    background-color: #333; 
} 

.navbar-nav > li { 
    line-height: 50px; 
    position: relative; 
} 

.logo, .navbar-nav > li > .btn { 
    margin: 0 15px; 
} 

@media (min-width: 767px) { 
    .navbar-search-form { 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: 100%; 
    float: none; 
    text-align: center; 
    padding: 8px 0; 
    } 
} 

Answer 2

Класс «text-center» в бутстрапе 3 предназначен для выравнивания дочернего элемента с центром.

Answer 3

Простейший способ заключается в использовании flex, но он имеет плохую совместимость браузера, так что вы можете использовать media queries и position:absolute; для .navbar-form.

Дать position-relative на div .container только внутри nav. Я дал ему некоторую границу, чтобы вы могли видеть центрирование. Ваша кнопка sign in придерживается верхнего правого угла, потому что вы дали ей navbar-right класс.

.navbar-header img{ 
 
    width:70px; 
 
    margin:0; 
 
} 
 
.navbar-container{ 
 
    position:relative; 
 
    border:1px solid red; 
 
} 
 
.navbar-header button span{ 
 
    color:black; 
 
    background-color:green; 
 
} 
 
@media screen and (min-width:768px){ 
 
    form.navbar-form{ 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translate(-50%,-50%); 
 
    margin:0; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<nav class="navbar navbar-transparent navbar-fixed-top" role="navigation"> 
 
    <div class="container navbar-container"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg" alt="logo"> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <form class="navbar-form navbar-search-form active" role="search"> 
 
     <div class="form-group"> 
 
      <input type="text" value="" class="form-control" placeholder="Search..."> 
 
      <a href="javascript:void(0);"><i class="fa fa-search"></i></a> 
 
     </div> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><button href="#gsdk" class="btn btn-round btn-default">Sign in</button></li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav>