Bootstrap btn-toolbar 对齐按钮（如 btn-group btn-group-justified）答案

【问题标题】：Bootstrap btn-toolbar justified buttons (like btn-group btn-group-justified)Bootstrap btn-toolbar 对齐按钮（如 btn-group btn-group-justified）
【发布时间】：2017-02-22 20:59:51
【问题描述】：

最终目标：让 X 按钮覆盖 div 的整个宽度（对齐），每个按钮之间有边距。就像'.btn-group .btn-group-justified'，但有边距。 Bootply

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group btn-group-justified" role="group">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Yes</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">No</button>
    </div>
</div>

在搜索时，我发现了这个 SO 解决方案：https://stackoverflow.com/a/33315549/5003918

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar">
    <button type="button" id="btnSubmit" class="btn btn-success btn-sm">Yes</button>
    <button type="button" id="btnCancel" class="btn btn-danger btn-sm">No</button>
</div>

这为我提供了按钮之间所需的边距，但没有提供合理的功能。

如果我尝试将“.btn-block”添加到按钮，那么它们将变为宽度宽度，但每个都在不同的行上。

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-toolbar text-center">
    <button type="button" id="btnSubmit" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-ok'></i> Yes</button>
    <button type="button" id="btnCancel" class="btn btn-primary btn-sm btn-block"><i class='glyphicon glyphicon-remove'></i> No</button>
</div>

有一个类似的SO question，但是没有解决办法。

Bootply

【问题讨论】：

标签： css twitter-bootstrap toolbar

【解决方案1】：

这就是你所追求的吗？它需要一些 CSS 样式来在按钮之间添加空间。

.btn-group {
  padding-left: 5px;
  padding-right: 5px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group-justified" role="group">
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">Yes</button>
    </div>
    <div class="btn-group" role="group">
        <button type="button" class="btn btn-primary">No</button>
    </div>
</div>

【讨论】：