Question

我正在尝试制作带有引导进度条的条形图。但问题是每两个进度条之间有一个空格。我希望他们互相联系。这是我的一个进度条的代码。

<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%">
  <span class="sr-only">40% Complete (success)</span>
 </div>
</div>

我怎样才能做到这一点？

更新这是我的完整代码

<div>   
    <div class="progress">
        <div class="progress-bar progress-bar-success" role="progressbar" style="width: 40%">
            <span class="sr-only">40% Complete (success)</span>
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 65%">
            <span class="sr-only">40% Complete (success)</span>
        </div>
    </div>

Answer 1

问题是默认情况下bootstrap具有以下样式：

.progress {
    margin-bottom:20px;
}

您可以通过添加自己的样式表来覆盖它：

.progress {
    margin-bottom:0;
}

modified jsfiddle

Answer 2

您可以使用进度类向div添加一个额外的类，并手动覆盖它以将margin-bottom设置为较小的值（当前为20px）

如何删除引导滚动条之间的空间？

2 个答案: