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; 
}