如果我将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 票数:10 已采纳

如果我将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>

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

如果我将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>

  ask by Greg Rogers translate from so

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

1回复

Bootstrap 3中的分段进度条

我有一个用户需要输入数据的网页。 一旦他们输入10个项目,他们就可以继续。 我正在尝试创建一个进度条,以直观地表示他们输入/已经输入的项目数量。 这是我正在尝试创建的图像 到目前为止,我最接近的是使用Bootstrap的堆叠进度条。 但是,对于堆叠条, 未填充的区域是单个
4回复

bootstrap进度条不工作

bootstrap进度条不能在我的mvc索引视图上工作我用chrome和ie试过了。
4回复

bootstrap进度条没有动画

我使用ruby gem在我的Rails 4应用程序中安装了bootstrap。 我已经直接从bootstraps文档复制并粘贴了动画进度条的代码到我的页面中: 但酒吧不是动画。 我唯一能想到的是我在sass变量中更改了条形图的颜色。 为什么不动画? 编辑 我的酒
2回复

Bootstrap旋转木马的进度条

我正在使用Bootstrap 3轮播。 我不想拥有控件或指示器,但我想要一个进度条。 当悬停时,进度条也会暂停。 下面是我的代码: 我想要的是: http : //jsfiddle.net/cfV6c/
1回复

引导进度条技能

如何在引导程序中创建进度条,如下图所示 进度条
1回复

如何添加引导进度条?

目前正在制作在线餐饮计划者,这是我们论文项目的一部分。 我想做的是向它添加一个进度条(引导程序3)。 基于此的滑块形式是一系列形式 我正在谈论的jQuery插件预览: jFormslider,作者Harish U Warrier
1回复

如何在Bootstrap 3中动态更改进度条类?

我有一些像这样简单的进度条: 第二个进度条的颜色为绿色。 我有一个按钮 我想函数changeColor()将第二个导航栏(绿色) class="progress-bar-success "的颜色更改为class="progress-bar-info" 我举个例子:
1回复

浏览器对Bootstrap 3进度条的支持

我正在编码需要使用进度条的MVC 5视图,并且不确定执行此操作的最佳方法。 我想在以下资源中使用Bootstrap 3进度栏: http : //getbootstrap.com/components/#progress 在资源页面上有以下消息: 我的问题是:我应该使用在所有浏览
3回复

Bootstrap进度条计时器

首先,您好,我正在使用Angular.js,Bootstrap,HTML和JavaScript(显示这些2)。 所以,我的APP中有以下引导进度条: 现在,我希望它从100%减少到0%(每个百分比为1秒),重点是从它做出一个定时器,在它达到零之后,用户不能再执行指定的行动。 我真
1回复

如何改变Bootstrap进度条的最大值?

基本上我的进度条有7个“步” - 默认的最大值是100,因此100/7不会分成整数。 因此,我想将进度条的最大值更改为例如7。 我已经尝试更改aria-valuemax并尝试设置data-max,但它们都没有改变任何东西。 如何更改Bootstrap进度条的最大值?