ブートストラップ3は、ナビゲーションバー

Question

内の入力幅を最大化するために、どのように今、私は次のようになりますナビゲーションバーを持っています（つまり、「情報」リンクでは「クリア」リンクがきつくなります）。

私はCSSとウェブデザインの基本的な経験があります。私は "overflow: hidden"トリックについて何かを読んでいましたが、ターゲット要素の右側にもっと多くの要素がある場合は、その使い方を理解していません。

おかげ

---

EDIT：

部分解はhttp://bootply.com/78247のように、それぞれの場合については、 "手動" の幅を設定することができる。

@media (max-width: 767px) { 
    #searchbar > .navbar-form { 
    width: 100%; 
    } 
} 

@media (min-width: 768px) and (max-width: 991px) { 
    #searchbar > .navbar-form { 
    width: 205px; 
    } 
} 

@media (min-width: 992px) and (max-width: 1199px) { 
    #searchbar > .navbar-form { 
    width: 425px; 
    } 
} 

@media (min-width: 1200px) { 
    #searchbar > .navbar-form { 
    width: 625px; 
    } 
} 

をこの解決策ではないであろうメニューのテキストが「動的」（「Helloユーザー名」など）のときに機能します。

メニューのテキストの幅に制限があると仮定すると大きな問題ではないと思います。手動でそれらの幅を計算/テストするのは面倒です。 私はちょうどそれを自動的に行うためのきちんとした方法があるかどうかを知りたいだけです。

Answer 1

ブートストラップバージョン3.2以降では、input-groupの場合はdisplay:table;を、input-group-addonの場合は幅を1%に設定する必要があります。

<div style="display:table;" class="input-group"> 
      <span style="width: 1%;" class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> 
      <input type="text" autofocus="autofocus" autocomplete="off" placeholder="Search Here" name="search" style="" class="form-control"> 
      </div> 

デモブートストラップバージョン3.2以上：http://www.bootply.com/t7O3HSGlbc

-

あなたのナビゲーションバーの要素の位置を変更する許可した場合？改行を作成せずに「分かりません」と表示されます（「概要」リンクが「バージョン情報」リンクでタイトになります）。これを試してください：http://bootply.com/78374。

私がやったこと

：

• ドロップ形の左フロート（ナビゲーションバー左側クラスをドロップすることによって）
• 他のナビゲーションバーの要素を右フロート（ナビゲーションバーの右クラス）
• を与えますインラインにフォームグループの設定表示（style="display:inline"）
• 変更要素の位置（右最初浮い）

関連質問：

• Expand div to max width when float:left is set

HTML：

<div class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <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> 
     <a class="navbar-brand" href="#">My Project</a> 
    </div> 
    <div class="navbar-collapse collapse" id="searchbar"> 

     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="about.html">About</a></li> 
     <li id="userPage"> 
      <a href="#@userpage"><i class="icon-user"></i> My Page</a> 
     </li> 
     <li><a href="#logout" data-prevent="">Logout</a></li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#" title="Start a new search">Clear</a></li> 
     </ul> 



    <form class="navbar-form"> 
     <div class="form-group" style="display:inline;"> 
      <div class="input-group"> 
      <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span> 
      <input class="form-control" name="search" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text"> 
      </div> 
     </div> 
     </form> 

    </div><!--/.nav-collapse --> 
    </div> 
</div> 

Answer 2

二つの事はここに私のために働きました。Orensメディアクエリを追加し、またその検索バーフォームグループにdisplay: inlineを追加：

<li id="searchbar"> 
      <form id="search_form" class="navbar-form navbar-left navbar-input-group " role="search"> 
      <div class="input-group"> 
       <div class="input-group-btn"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">All <span class="caret"></span> 
       </button> 
       </div> 
       <div class="form-group"> 
       <input name="search_input" type="text" class="form-control typeahead" placeholder="Search for items or shops" autofocus="autofocus"> 
       </div> 
       <span class="input-group-btn"> 
      <button type="submit" class="btn btn-default"><i class="fa fa-search"></i> 
      </button> 
      </span> 
      </div> 
      </form> 
     </li> 

CSSで：

#search_form > .input-group > .form-group { 
    display: inline; 
}