限制twitter bootstrap中进度条的宽度

roc*_*tar 4 html css jquery-ui twitter-bootstrap

我正在使用twitter bootstrap为我的Ui增添趣味.我真的倾向于在页面上添加进度条.以下工作正常,只是进度条跨越整个屏幕宽度.我希望它被限制在一个小的矩形区域而不是整个屏幕的长度.知道怎么做吗?

<div class="left" >
    <p> <strong>Use the portal to submit your claims</strong></p>
    <p> Step 1 </p>
    <div class="progress progress-info">
        <div class="bar" style="width: 15%" ></div>
    </div>
    <p> Step 2 </p>
    <div class="progress progress-info">
        <div class="bar" style="width: 30%"></div>
    </div>
    <p> Step 3 </p>
    <div class="progress progress-info">
        <div class="bar" style="width: 45%"></div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Bil*_*oat 6

只需将包含DIV的DIV类放在您想要的宽度上即可.

如果您正在使用Bootstrap的网格系统,那么您将使用带有行和容器的相应"span"类.