Bootstrap select form-inline input-group break at 768px

Question

我不知道爲什麼，但我有一個form-inline工作正常，但它在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有一些媒體查詢規則，這是不存在的移動設備。這就是爲什麼輸入組中斷。

我不確定780px的問題。當我們將＃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; 
}