css - 如何以响应方式为同一行的按钮设置边距？

Question

我目前在水平线上有几个按钮，但我想添加边距以使按钮彼此远离。

我在一个较小的窗口中编辑我的代码，按钮使用 CSS 边距很好地间隔开，但是当我最大化窗口时，我注意到按钮之间的边距要么将一些按钮推到新行，要么将它们拉回。

我一直没能找到一种方法来以响应方式为同一行上的这些按钮设置边距，这样它们就不会推到新行或拉回。

有什么想法吗？

HTML

<button type="submit" class="btn btn-primary btn-lg btn-submitpadding">Submit</button>
        <a href="/select-all" class="btn btn-default btn-selectspacer">Select All</a>
        <a href="/deselect-all" class="btn btn-default">Deselect All</a>
        <a class="btn btn-info btn-infospacer" role="button" data-toggle="collapse" href="#helpInfo" aria-expanded="false" aria-controls="helpInfo">More Info</a></button>

CSS

.btn-selectspacer {
    margin-left: 40em;
}

.btn-infospacer {
    margin-left: 2.25em;
}

.btn-submitpadding {
    padding-top: 7px;
    padding-bottom: 7px;
}

图片 Button Spaced with margins horizontally

谢谢，亚历克斯

Answer 1

您可以使用 Bootstrap 附带的网格系统来完成此操作。例如，提交占用 9 列，选择/全部占用 2 列，然后更多信息占用 1 列。然后只需将提交按钮对齐到列的左侧即可。