Bootstrap 选择表单内联输入组在 768px 处中断答案

【问题标题】：Bootstrap select form-inline input-group breaks at 768pxBootstrap 选择表单内联输入组在 768px 处中断
【发布时间】：2017-06-23 16:49:25
【问题描述】：

我不知道为什么，但是我的表单内联运行良好，但它在 768 像素处换行，并且在 780 像素左右的换行之前出现了一个滚动条。示例：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>

【问题讨论】：

标签： css forms twitter-bootstrap inline

【解决方案1】：

由于#DivSearchItemsContent 宽度设置为 800 像素，在 800 像素处出现滚动条。

在 768 像素处，有一些移动设备不存在的媒体查询规则。这就是输入组中断的原因。

我不确定 780px 的问题。当我们将#DivSearchItemsContent 的宽度固定为 100% 时，滚动条问题就不存在了。

这些是用于解决样式问题的 CSS

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

【讨论】：