ブートストラップでこのナビゲーションバーを整理する方法は？

Question

...私が正しく、このナビゲーションバーを整理する方法を知りたいので、私はCOL-オフセット、いくつかのCOLをしました...しかし、何も私を助けていない、私はいくつかのブートストラップを学んだし、この問題は私をオフになっています私が取得しようとしている何

は次のとおりです。

INDEX.HTML（ナビゲーションバーSNIPPET）

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <a class="navbar-brand" href="#"> 
      <img alt="Brand" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmHCiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7VhxCRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSMeVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC" width="20"> 
      </a> 
     </div> 
     <div class="row"> 
      <form class="navbar-form" role="search"> 
       <div class="input-group"> 
        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term"> 
        <div class="input-group-btn"> 
         <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> 
        </div> 
       </div> 
      </form> 
     </div> 
     <!--SEARCH NAVBAR--> 
     <div class="row"> 
      <div class="dropdown"> 
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
       Dropdown 
       <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
        <li><a href="#">Alta usuari</a></li> 
        <li><a href="#">Cerca d'usuaris</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Manteniment taules mestre</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Ajuda DIBA</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Logout</a></li> 
       </ul> 
      </div> 
     </div> 
     <!--MENU NAVBAR--> 
     <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" 
      data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">ToggleNav</span> 
      <!--EL ICONO DE MENU, SE HACE ASI, QUE TRISTE--> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div> 
</nav> 

正しいを取得するためのベストプラクティスは何ですかnavbar上にいくつかのものを実装する順序？おかげで、あなたは非常に多くの

UPDATE ERRORブラケット：

私はコードの誤りではありません知っているが、それはライブプレビューを切断し、そして私はウィンドウを最大化するとき、それはdoesnの「Tは、ここで

Answer 1

。それを変更/削除することができます。

あなたはrowを使用する必要はありません。

<div class="navbar-header"> 
    <a class="navbar-brand" href="#">B</a> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <div class="dropdown pull-right" style="margin-top:7px;"> 
       <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" 
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
       Dropdown 
       <span class="caret"></span> 
       </button> 
       <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
        <li><a href="#">Alta usuari</a></li> 
        <li><a href="#">Cerca d'usuaris</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Manteniment taules mestre</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Ajuda DIBA</a></li> 
        <li role="separator" class="divider"></li> 
        <li><a href="#">Logout</a></li> 
       </ul> 
      </div> 

    <form class="navbar-form navbar-right" role="search"> 
     <div class="form-group input-group"> 
      <input type="text" class="form-control" placeholder="Search.."> 
      <span class="input-group-btn"> 
      <button class="btn btn-default" type="button"> 
       <span class="glyphicon glyphicon-search"></span> 
      </button> 
      </span> 
     </div> 
     </form> 
    </div> 

ご希望の出力を参照してください：http://www.bootply.com/obQ6W1pL81

Answer 2

は、あなたが探しているもののbootplyです...ナビゲーションバートグルを示しています。あなたは、ナビゲーションバーで、クラス.rowを使用しないと、あなたは.navbar-right http://www.bootply.com/lu9p6jQXlx#

動作するように最小化ナビゲーションバーのリンクを更新するクラスを使用したいです。ブートストラップを動作させるためにCSSを使う必要はありません。私もトグルバーにいくつかのメニューを維持している

.navbar-header { 
    float: none; 
} 
.navbar-toggle { 
    display: block; 
} 
.navbar-collapse.collapse { 
    display: none!important; 
} 
.navbar-nav { 
    float: none!important; 
} 
.navbar-nav>li { 
    float: none; 
} 
.navbar-collapse.collapse.in{ 
    display:block !important; 
} 

：あなたはこのCSSコードを使用する必要があり、すべての画面サイズでごtoggle-barを可視化するため

Answer 3

はここかもしれないが、あなたの質問にいくつかの助けを与えるのリンクです： http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_navbar_right&stacked=h