如何摆脱我在 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 的中心，请在.row div 中使用添加text-align: center; 并从.row 中删除margin-right: -15px; 和margin-left: -15px;（您可以创建自定义类.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;
}