引导中心两个宽度有限的进度条？答案

【问题标题】：Bootstrap Center two progress bars with limited width?引导中心两个宽度有限的进度条？
【发布时间】：2017-01-18 02:28:55
【问题描述】：

我正在尝试将两个进度条置于 HTML 画布元素的中心。

我尝试了各种 Bootstrap 类和 CSS 更改，但我无法使其工作，除非我只是添加到左侧边距。任何帮助表示赞赏。

HTML

<div class="container">
    <div class="row">
        <div id="scoreBoardLeft" class="col-xs-6 text-right"><a href="#" id="leftScore" class="btn btn-default"></a></div>
        <div id ="scoreBoardRight" class="col-xs-6"><a href="#" id="rightScore" class="btn btn-default"></a></div>
    </div>
    <div class="row">
        <div class="col-xs-6 progress progress-striped active">
            <div class="progress-bar" style="width: 45%"></div>
        </div>
        <div class="col-xs-6 progress progress-striped active">
            <div class="progress-bar" style="width: 45%"></div>
        </div>
    </div>
    <div class="row">
        <div id="pong" class="col-xs-12 text-center"></div>
    </div>
</div>

CSS

* {
    padding: 0; margin: 0; 
}

canvas {
    background: #eee;
    display: block;
    margin: 0 auto;
}

#scoreBoardLeft {
    padding-right: 1px;
}

#scoreBoardRight {
    padding-left: 1px;
}

#leftScore {
    width: 35px !important;
}

#rightScore {
    width: 35px !important;
}


.progress {
    margin-bottom: 1px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    height: 10px !important;
    width: 300px !important;
}

【问题讨论】：

标签： javascript html css twitter-bootstrap-3 frontend

【解决方案1】：

问题似乎出在你设置的：

.progress {
  width: 300px !important;
}

!important 标志正在覆盖 BootStrap 设置的 col-xs-6 的 width:50%。

简单地删除这一行似乎可以解决这个问题:)

我创建了一个小提琴来演示这一点，可以在 here 找到。

希望这会有所帮助！

编辑以限制宽度：

使用当前标记限制宽度的问题是，您需要在与 Bootstrap 列相同的类上设置边距，这会将元素推送到当前 HTML 标记的下一行。

我建议更换：

<div class="col-xs-6 progress progress-striped active">
    <div class="progress-bar" style="width: 45%"></div>
</div>

与：

<div class="col-xs-6">
    <div class="progress progress-striped active">
        <div class="progress-bar" style="width: 45%"></div>
    </div>
</div>

通过添加这个新的 div 并改变上面的结构，你可以修改 .progress 的 width，就像你最初尝试做的那样，它会产生预期的效果:)

我创建了一个新的小提琴，改变了这个，并给了条 30% 的宽度来反映我认为你正在寻找的改变:)

新的小提琴可以在here找到。

【讨论】：

感谢您的回复！但是现在进度条居中，我该如何限制它们的宽度，我是否需要在左右添加额外的列来填充该空间。
我已更新我的答案以显示条形如何具有有限的宽度。具有讽刺意味的是，这实际上意味着恢复到您最初所做的事情，并且只是稍微更改 HTML。希望这就是你要找的:)

【解决方案2】：

为了解决我的问题，我不得不在引导程序中禁用响应能力。然后我将我的网格容器的宽度设置为等于我的画布元素的宽度。

Boostrap 可能不是最佳选择，因为我不想要响应式网格，这是经验教训。

Diable bootstrap responsiveness

【讨论】：