带有 AngularJS Bootstrap 模块的按钮之间的空格答案

【问题标题】：Whitespace between buttons with AngularJS Bootstrap module带有 AngularJS Bootstrap 模块的按钮之间的空格
【发布时间】：2017-04-17 14:57:20
【问题描述】：

我正在尝试使多个按钮看起来像以下代码中的菜单

<div class="btn-group" uib-dropdown>
      <button id="" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Inline Dropdown
      </button>
      <ul uib-dropdown-menu>
        <li role=""><a href="#">Action</a></li>
        <li role=""><a href="#">Another action</a></li>
      </ul>
    </div>
    <div class="btn-group" uib-dropdown>
      <button id="" type="button" class="btn btn-primary" uib-dropdown-toggle>
        Inline Dropdown
      </button>
      <ul uib-dropdown-menu>
        <li role=""><a href="#">Action</a></li>
        <li role=""><a href="#">Another action</a></li>
      </ul>
    </div>

一切正常，但两个 div 之间的空格很小。我该如何解决。

相同的 plunker 在这里： https://plnkr.co/edit/W8d74Qpqm4p4oLJnNXgT?p=preview

【问题讨论】：

.btn-group 和/或 .dropdown 类需要浮动。如果你在类上向左浮动，两者之间的空间就会消失。

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

您可能想要使用导航栏元素而不是多个下拉菜单。如果你想删除空格试试这个：

.btn-group {
   display:block;
}

【讨论】：

【解决方案2】：

在第二个 div 上使用内联样式或编辑原始类：

style="margin-left:-4px"

或

.btn-group {
display:block;
}

【讨论】：