html - CSS - bootstrap btn-group-justified with buttons between buttons

Question

在下面的示例中，您可以看到按钮之间几乎没有区别，因此希望在按钮之间使用一些间距，就像 btn-toolbar 所做的那样。但是我不能使用它，因为按钮会非常小并且不会填满整个 div

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-group 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>

我希望间距是这样的:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="btn-toolbar" 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>

Answer 1

这是另一种解决方案。由于 btn-group 仅舍入组的最左边缘和最右边缘，因此您宁愿删除 .btn-group来自 <div class=" btn-group btn-group-justified" role="group"> , 然后将填充设置为 .btn-group 类的内部 div

如您所愿，您可以为此 .btn-group 定义更高的特异性以防止风格向外传播。

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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>