如果我将一个Bootstrap 3进度条添加到带有表浓缩的Bootstrap表中,我会丢失行的“压缩”部分(它们会变得更高)。 进度条的默认最小高度是否会强制表压缩行更大?

这是我试图“修复”的行为示例:

JSFiddle: 简明表/进度条示例

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

===============>>#1 票数:8 已采纳

Bootstrap增加了一个margin-bottom: 20px; 到它的进度条div。 适当地覆盖那个大小的表行。

===============>>#2 票数:6

您需要覆盖进度类的margin CSS属性。

.progress {
    margin-bottom: 0 !important;
}

将其添加到页面的头部作为附加样式或作为附加类添加到您的CSS。

  ask by Greg Rogers translate from so

未解决问题?本站智能推荐: