CSSブーツストラップnavbar-center検索バーが崩壊時に全幅を取ります

Question

私は3つの要素を持つブートストラップv.3のナビゲーションバーを持っています。私は、検索バーがnavbarの中央にくるように要素を均等に整列させたいと思います。そしてそれが崩壊すると、それは完全なものを取ります。しかし、それをするのに苦労します。

これはそれのための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

ブートストラップ3のクラス "text-center"は、子要素を中央に揃えるために作成されています。

Answer 3

最も簡単な方法はflexですが、ブラウザの互換性が低いため、media queriesとposition:absolute;を.navbar-formに使用できます。

navのすぐ内側の.containerにposition-relativeを指定してください。私はそれにいくつかの国境を与えたので、あなたはセンタリングを見ることができます。あなたの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>