如何摆脱我在Bootstrap中的下拉列表之间的空间

Question

我的申请有6个下拉菜单

这是其中两个的代码，（注意：我在代码的开头将所有东西都包装在container1类中。

    <div class="container1">
      <div class="row">
        <div class="col-sm-2 col-xs-4">
          <div class="btn-group" role="group" aria-label="...">
            <div class="dropdown">
              <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-  expanded="true">
                Dropdown
                <span class="caret"></span>
                </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
                  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
              </ul>
            </div>
          </div>
        </div>

<div class="col-sm-2 col-xs-4">
      <div class="btn-group" role="group" aria-label="...">
        <div class="dropdown">
          <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
            Dropdown
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

如你所见，我将所有内容都包含在一个名为 container1 的类中，它是由be创建的。 这是我的班级 container1 有

.container1 {
  margin-right: 200px;
  margin-left: 200px;
}

它就像魔法一样，这就是我得到的（正如你看到它们之间的空间更小） 问题：我的方法运行良好，但当我将浏览器屏幕缩小时，它没有响应。这就是我得到的

但如果我把它保留为默认引导程序，它们之间有这么大的空间，我会得到一个很棒的响应。

对于小型设备，如何使下拉列表之间的空间变小，同时让下拉列表保持响应，默认为自举。

感谢您的时间。

Answer 1

我认为责任问题来自.container1类，它减少了col-**-**类使用的宽度。如果您希望下拉菜单位于.row div的中心，请在text-align: center; div中添加.row，然后从中删除margin-right: -15px;和margin-left: -15px; .row（您可以创建自定义类.margin-ignore { margin: 0 !important; }并将其添加到.row div。另外，将col-xs-4替换为col-xs-6，因为下拉按钮的宽度更大在某些情况下col-xs-4。最终结果可能如下所示：
JSFiddle：https://jsfiddle.net/0n8xmy7a/2/
尝试调整屏幕大小，看它是否适合您。
如果您仍然不喜欢下拉菜单采用新位置的方式和时间，您可以编写自己的列网格类，并在要触发的类和保存此类的元素的宽度时明确写入屏幕的宽度。
祝你好运！

Answer 2

而不是使用边距，您可以使用max-width在大屏幕上保持按钮靠近。

.container1 {
    max-width: 800px;
    margin: 0 auto;
}