Question

我正在尝试将两个进度条集中在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;
}

Answer 1

问题似乎在于您设置：

.progress {
  width: 300px !important;
}

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

简单地删除此行似乎可以解决此问题：）

我创造了一个演示这个的小提琴，可以找到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并更改上面的结构，您可以修改width .progress，因为您在第一时间尝试这样做，它会产生预期的效果：）

我创造了一个新的小提琴，改变了这一点，并给出了30％的宽度以反映我认为你正在寻找的变化：）

可以找到新的小提琴here。

Answer 2

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

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

Diable bootstrap responsiveness

Bootstrap Center有两个宽度有限的进度条？

2 个答案: