如何在同一个 div 中的两个按钮之间留出空间？

Question

水平放置 Bootstrap 按钮的最佳方式是什么？

目前按钮正在触摸：

 <div class="btn-group">
    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
        <i class="icon-in-button"></i>
        Add to list
        <span class="caret"/>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="#">here</a>
        </li>
        <li>
            <a href="#">new</a>
        </li>
    </ul>
    <button class="btn btn-info">
        <i class="icon-in-button"></i>
        more
    </button>
</div>

显示问题的 jsfiddle：http: //jsfiddle.net/hhimanshu/sYLRq/4/

原文由 daydreamer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将它们放在 btn-toolbar 或其他容器中，而不是 btn-group 。 btn-group 将它们连接在一起。有关 Bootstrap 文档 的更多信息。

编辑：最初的问题是针对 Bootstrap 2.x 的，但对于 Bootstrap 3 和 Bootstrap 4 仍然有效。

在 Bootstrap 4 中，您需要使用实用程序类（例如 mx-2）为您的组添加适当的边距。

原文由 Miroslav Popovic 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就像 Miroslav Popovic 兄弟所说的那样，只需将按钮放在一个类（class=“btn-toolbar”）中即可。它非常棒。

 <div class="btn-toolbar">
  <button type="button" id="btnSubmit" class="btn btn-primary btn-sm">Submit</button>
  <button type="button" id="btnCancel" class="btn btn-primary btn-sm">Cancel</button>
</div>

原文由 Manmohan 发布，翻译遵循 CC BY-SA 3.0 许可协议