HTML CSS＆Bootstrap navbar検索の幅とカスタマイズ

Question

ブートストラップ/スタイリングで苦労しています。私はsearchboxといくつかのボタンでnavbarを作成しました。

検索バーの幅をカスタマイズする方法がわかりません。私は固定幅を設定することができましたが、可能な場合はグリッドシステムを利用して応答性があるようにしたいと考えています。

idは検索バーのように、デフォルトに設定されているものよりも少し長くなります。 おそらく幅が自動ねじであることでしょうか？よく分かりません。

*私もこのフィドルにブートストラップ・セレクトを持っていますが、何らかの理由で、それは文句を言わない

フィドル（私はまあ...それのためのCDNの参照を追加しました）表示：https://jsfiddle.net/uaLj1n07/2/

<nav class="navbar navbar-default" role="navigation" data-spy="affix" data-offset-top="275" style="margin-bottom:5px"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <form action="#" class="navbar-form navbar-left" role="search" id="searchForm"> 
     <div class="input-group"> 
      <input type="text" class="form-control input-sm" placeholder="Search..." name="searchTerms" /> 
      <span class="input-group-btn"> 
           <button type="submit" class="btn btn-default-grey btn-sm"><i class="glyphicon glyphicon-search"></i></button> 
           <select class="selectpicker show-tick " id="searchDate" name="searchDate" data-style="btn btn-default-grey btn-sm" data-width="fit"> 
            <option id="anytime" value="anytime">Any Time</option> 
            <option data-divider="true"></option> 
            <option id="30days" value="30days">Last 30 Days</option> 
            <option id="60days" value="60days">Last 60 Days</option> 
            <option id="90days" value="30days">Last 90 Days</option> 
           </select> 
           <button type="button" class="btn btn-sm btn-link">Advanced</button> 
          </span> 
     </div> 
     </form> 
     <form class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <a href="#" class="btn btn-danger btn-sm"> 
      <i class="glyphicon glyphicon-pencil adjust-left" aria-hidden="true"></i> Some Button 
      </a> 
     </div> 
     </form> 
    </div> 
    </div> 
</nav> 

を

.form-control.input-sm { 
    min-width: 300px; 
} 

私はあなたのコードをフォークし、ここでフィドルを作成：

Answer 1

あなたは、このような検索ボックスのmin-widthを設定することができますhttps://jsfiddle.net/bxqj3q8g/