调整窗口大小时使文本静止不动

Question

抱歉标题不好，但想不出更好的。

我有这个用 Bootstrap 创建的进度条，以及 oer 和 under 的图像和段落。但是当我尝试调整窗口大小（降低它）时，它会改变位置并突然破坏一切。我需要它的 imgs 和段落与进度条的宽度完全相同。

<div>
    <p style="display:inline-block;">0</p>
    <p style="margin-left:23.6%;display:inline-block;">800</p>
    <p style="margin-left:1.9%;display:inline-block;">950</p>
    <p style="margin-left:1.9%;display:inline-block;">1100</p>
    <p style="margin-left:1.9%;display:inline-block;">1250</p>
    <p style="margin-left:1.9%;display:inline-block;">1400</p>
    <p style="margin-left:1.9%;display:inline-block;">1550</p>
    <p style="margin-left:1.9%;display:inline-block;">1700</p>
    <p style="margin-left:1.9%;display:inline-block;">1850</p>
    <p style="margin-left:1.9%;display:inline-block;">2000</p>
</div>
<div class="row" style="text-align:center;margin-left:0px;margin-right:0px;">
    <div class="progress" style="margin-bottom:0px;height:40px;background-color:#cfcfcf;">
        <div class="progress-bar" role="progressbar" aria-valuenow="'@ViewBag.EloWidth'"
             aria-valuemin="0" aria-valuemax="3000" style="width:@ViewBag.EloWidth%;background-color:#6378ff;">
        </div>
    </div>
</div>
<div>
    <img src="/Images/lvl1.png">
    <img src="/Images/lvl2.png" style="margin-left:21%;">
    <img src="/Images/lvl3.png" style="margin-left:1.3%;">
    <img src="/Images/lvl4.png" style="margin-left:1.9%;">
    <img src="/Images/lvl5.png" style="margin-left:2.2%;">
    <img src="/Images/lvl6.png" style="margin-left:2.3%;">
    <img src="/Images/lvl7.png" style="margin-left:2.3%;">
    <img src="/Images/lvl8.png" style="margin-left:2.3%;">
    <img src="/Images/lvl9.png" style="margin-left:2.3%;">
    <img src="/Images/lvl10.png" style="margin-left:2.3%;">
</div>

Answer 1

您没有在其余布局（标签和图标）中使用引导程序。试试这个：

<div class="row">
    <div class="col-3">
        <p>0</p>
    </div>
    <div class="col-1">
        <p>800</p>
    </div>
    <div class="col-1">
        <p>950</p>
    </div>
    <div class="col-1">
        <p>1100</p>
    </div>
    <div class="col-1">
        <p>1250</p>
    </div>
    <div class="col-1">
        <p>1400</p>
    </div>
    <div class="col-1">
        <p>1550</p>
    </div>
    <div class="col-1">
        <p>1700</p>
    </div>
    <div class="col-1">
        <p>1850</p>
    </div>
    <div class="col-1">
        <p>2000</p>
    </div>
</div>
<div class="row" style="text-align:center;margin-left:0px;margin-right:0px;">
    <div class="progress col-12" style="margin-bottom:0px;height:40px;background-color:#cfcfcf;">
        <div class="progress-bar" role="progressbar" aria-valuenow="'@ViewBag.EloWidth'"
             aria-valuemin="0" aria-valuemax="3000" style="width:@ViewBag.EloWidth%;background-color:#6378ff;">
        </div>
    </div>
</div>
<div class="row">
    <div class="col-3">
        <img src="/Images/lvl1.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl2.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl3.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl4.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl5.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl6.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl7.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl8.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl9.png">
    </div>
    <div class="col-1">
        <img src="/Images/lvl10.png">
    </div>
</div>

这是一个关于Bootstrap Grid System 的有用公会。您也可以使用class="col-12" 作为进度条。

编辑：为 Bootstrap4 工作的 Plunker： Plunker BS 4

EDIT2：为 Bootstrap3 工作的 Plunker： Plunker BS 3