Bootstrap 将两个进度条居中并限制宽度？

Question

我试图将两个进度条置于 HTML canvas 元素的中央。

我已经尝试了各种 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;
}

Answer 1

问题似乎出在你设置的地方：

.progress {
  width: 300px !important;
}

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

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

我创建了一个 fiddle 来演示这一点，可以在 here.

中找到

希望对您有所帮助！

编辑以限制宽度：

使用当前标记限制宽度的问题在于，您需要在与 Bootstrap 列相同的 class 上设置边距，这会将元素推到下一行您当前的 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，就像您最初尝试做的那样，并且它会有预期的效果:)

我创建了一个新的 fiddle，对此进行了更改，并将条形宽度设置为 30% 以反映我认为您正在寻找的更改:)

可以找到新的fiddlehere。

Answer 2

为了解决我的问题，我不得不在 bootstrap 中禁用响应。然后，我将网格容器的宽度设置为等于 canvas 元素的宽度。

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

Diable bootstrap responsiveness

Bootstrap 将两个进度条居中并限制宽度？

Bootstrap Center two progress bars with limited width?

html

javascript

css

frontend

twitter-bootstrap-3