ブートストラップは、768pxのフォームインライン入力グループのブレークを選択します。

Question

なぜ私はよくわかりませんが、フォームインラインはうまく動作しますが、768pxの行がブレークし、約780pxのブレークの直前にスクロールバーが表示されます。 例：http://jsfiddle.net/qrrhzjd0/

なぜそれが768pxで壊し、なぜそこにちょうど休憩の前に現れる身体上のスクロールバーであるのか？

私はブートストラップを選択せず​​に試してみましたが、私は同じ改行を取得しました。ブートストラップの選択のためではありません。

$("#SelectTopic").selectpicker({ 
 
    style: "btn-search", 
 
    header: "Theme", 
 
}); 
 
$("#SelectTheme").on("change", function() { 
 
    $(".btn").blur(); 
 
});

#DivSearchItems { 
 
    background: #fffffe; 
 
    min-height: 45px; 
 
    text-align: center; 
 
    line-height: 53px; 
 
} 
 

 
#DivSearchItemsContent { 
 
    display: inline-block; 
 
    text-align: left; 
 
    width:800px; 
 
} 
 

 
.btn-search { 
 
    background-color: #fffffe; 
 
    color: #282522 !important; 
 
    border: 1px solid #282522; 
 
} 
 

 
#DivSearchItemsContent input { 
 
    color: #282522 !important; 
 
    border-top: 1px solid #282522; 
 
    border-bottom: 1px solid #282522; 
 
    border-right: none important; 
 
    border-left: none !important; 
 
} 
 

 
#DivSearchItemsContent .btn-go { 
 
    color: #282522 !important; 
 
    border: 1px solid #282522; 
 
    background: #f2f2f2; 
 
    width: 60px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
      <form class="form-inline"> 
 
      <div class="input-group"> 
 
       <div class="input-group-btn" style="width:150px;"> 
 
        <select id="SelectTopic" name="SelectColour" class="form-control" class="btn-search"> 
 
         <option value="">Theme</option> 
 
         <option value="Animals">Animals</option> 
 
         <option value="Nature">Nature</option> 
 
         <option value="Cities">Cities</option> 
 
        </select> 
 
       </div> 
 
       <div class="input-group" style="margin-top:-3px;"><input id="InputSearchItems" type="text" class="form-control" name="snpid" placeholder="Butterfly,nature, trees, etc..." style="width:400px;"></div> 
 
       <span class="input-group-btn"> 
 
       <button class="btn btn-orange btn-go" type="submit">GO</button> 
 
       </span> 
 
      </div> 
 
      </form> 
 

Answer 1

800ピクセルで、スクロールバーが#DivSearchItemsContent幅が800ピクセルに設定されている原因に表示されます。

768pxには、モバイルデバイスには存在しないメディアクエリルールがいくつかあります。そのため、入力グループが中断します。

私は＃DivSearchItemsContentの幅を100％として修正すると、スクロールバーの問題は存在しません。

そして、これらは正常に動作し、はいあなたのスタイリングの問題

span.input-group-btn{ 
    width: auto !important; 
} 

.form-inline .input-group .input-group{ 
    display: inline-table !important; 
    vertical-align: middle !important; 
} 


#DivSearchItemsContent{ 
    width:100% !important; 
}