Bootstrap btn工具栏对齐按钮（如btn-group btn-group-justified）

Question

结束目标：让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

Answer 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>