如何使用CSS引导程序将进度条添加到按钮组?

Question

我正在尝试将按钮组放在进度条"直接旁边"的同一行上。

我尝试使用row模板，但这在它们之间创造了很大的空间。我喜欢让它们直接挨在一起。

<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button class="btn btn-info" role="button">
<span class="glyphicon glyphicon-play"></span>
</button>
<button class=" btn btn-info" role="button">
<span class="glyphicon glyphicon-stop"></span>
</button>
</div>
</div>
<div class="col-sm-9">
<div class="progress mb-0 height-30">
<div class="progress-bar progress-bar-striped progress-bar-warning" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
</div>
</div>
</div>
</div>

这是一个小提琴手，我的代码 https://jsfiddle.net/DTcHh/40763/

如何使进度看起来像是按钮组的一部分？

Answer 1

使用Bootstrap 3，您需要使用一些"技巧"来扩展框架，例如从容器中删除装订线。 最重要的是，您需要从使用<button>过渡到<a>...</a>以利用.btn-group-justified。

最终，您的代码将如下所示：

.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
.button-controls .btn-group .btn:last-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.button-controls .progress,
.button-controls .progress-bar {
height: 30px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}

<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="container">
<div class="row no-gutters button-controls">
<div class="col-xs-3">
<div class="btn-group btn-group-sm btn-group-justified" role="group" aria-label="...">
<a class="btn btn-info" role="button">
<span class="glyphicon glyphicon-play"></span>
</a>
<a class=" btn btn-info" role="button">
<span class="glyphicon glyphicon-stop"></span>
</a>
</div>
</div>
<div class="col-xs-9">
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-warning" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
</div>
</div>
</div>
</div>

Answer 2

一种方法是不使用row，因为您情况下的btn-group具有类col-md-3的父级，该父级解析为25%宽度和btn-group，仅由 2 个按钮组成绝对不会占用那么多width。

这是你的小提琴的一个分支：JS小提琴

改变：

摆脱了row和columns，只是在btn-group中添加了pull-left，即float: left

希望这有帮助。 :)