Question

我正在尝试将一个按钮组放在同一行＆＃34;直接放在＆＃34;进度条。

我尝试使用"/scripts"模板但在它们之间创建了一个很大的空间。我喜欢把它们直接放在一起。

row

这是一个带有我的代码https://jsfiddle.net/DTcHh/40763/

的小提琴手

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

Answer 1

使用Bootstrap 3，你需要通过一些技巧来扩展框架＆＃39;比如从容器中取出排水沟。最重要的是，您需要使用<button>转换为<a>...</a>以利用.btn-group-justified。

最终您的代码看起来像这样：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

一种方法是不使用row，因为您的案例中btn-group的父级为col-md-3，其解析为25%宽度和{{1}仅由2个按钮组成，绝对不会占用btn-group的数量。

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

更改：

摆脱width和row，只是将columns添加到pull-left，即btn-group

希望这会有所帮助。：）

如何使用CSS bootstrap将进度条添加到按钮组？

2 个答案: