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

Question

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

我用 Bootstrap 创建了这个进度条，以及前后左右的图像和段落。但是当我尝试调整窗口大小时(降低它)，它会改变位置并突然破坏一切。我需要它的 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

您没有为布局的其余部分(标签和图标)使用 Bootstrap 。试试这个:

<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