如果我将Bootstrap 3进度条添加到带有表格浓缩的Bootstrap表中,我会丢失行的“压缩”部分(它们会变得更高)。进度条的默认最小高度是否会强制表格压缩的行?
以下是我正在尝试“修复”的行为示例:
JSFiddle:Condensed table/progress bar example
<table class='table table-condensed table-striped'>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
<br/>
<table class='table table-condensed table-striped'>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>
<div class='progress progress-striped'>
<div class="progress-bar progress-bar-warning" role="progressbar" style="width: 50%;">
Progress
</div>
</div>
</td>
<td>three</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
<td>three</td>
</tr>
</table>
答案 0 :(得分:7)
Bootstrap在其进度条div中添加margin-bottom: 20px;
。适当地覆盖那个大小的表行。
答案 1 :(得分:6)
您需要覆盖进度类的边距CSS属性。
.progress {
margin-bottom: 0 !important;
}
将此作为附加样式添加到页面的头部,或作为附加类添加到css。