javascript - 使用 Bootstrap 向下推列

Question

我在使用 Bootstrap 时遇到问题。出于某种原因，第三列被推下了。我不知道为什么。我完全被这个问题困住了，它只是出于某种原因只发生在这个页面上。任何帮助将不胜感激。

</div> 
  <div class="profit col-md-4 align-center">
    <img src="images/profit.png">
    <div class="rmo">
    <p>Ready Made Arch Support</p>
    </div>
        <div class="prof">
        <p>We stock over 75 sizes, 6 times more than other stores do. This is our most basic orthotic offered. Available for you to take home on the same day as your visit. We will fit you!</p>
        </div>
</div>

<div class="select col-md-4 align-center">
    <img src="images/select.png">
    <div class="cso">
    <p>Custom Select Orthotic</p>
    </div>
        <div class="sel">
            <p>We have an exclusive method of building custom orthotics without the high cost of traditional plaster casting. All of our orthotics are made local and come with a 24-48hr turn around.</p>
        </div>
</div>

<div class="cast col-md-4 align-center">
    <img src="images/cast.png">
    <div class="cco">
    <p>Custom Cast Orthotics</p>
    </div>
        <div class="cas">
            <p>For patients that need precise correction or complex offloading we offer custom cast orthotics that are created to address your specific needs. Available for pick up within 48 hrs.</p>
        </div>
.rmo{
 font-size: 20px;
 font-weight: bold; 
}

.cso{
 font-size: 20px;
 font-weight: bold; 
}

Answer 1

你的类(class)“.cast”正在使用左 535px 和上 425px 的定位，这迫使它向下。

对于 Bootstrap，重要的是将所有列定义放在一个行类中，并将其放在一个容器中，以帮助确保适当的填充、边距和清除。当我将 col 定义放入类行并删除该位置时，所有内容都对齐了。

<div class="container">
    <div class="row">
        <div class="profit col-md-4 align-center">
            <img src="images/profit.png">
            <div class="rmo">
                <p>Ready Made Arch Support</p>
            </div>
            <div class="prof">
                <p>We stock over 75 sizes, 6 times more than other stores do. This is our most basic orthotic offered. Available for you to take home on the same day as your visit. We will fit you!</p>
            </div>
        </div>
        <div class="select col-md-4 align-center">
            <img src="images/select.png">
            <div class="cso">
                <p>Custom Select Orthotic</p>
            </div>
            <div class="sel">
                <p>We have an exclusive method of building custom orthotics without the high cost of traditional plaster casting. All of our orthotics are made local and come with a 24-48hr turn around.</p>
            </div>
        </div>
        <div class="cast col-md-4 align-center">
            <img src="images/cast.png">
            <div class="cco">
                <p>Custom Cast Orthotics</p>
            </div>
            <div class="cas">
                <p>For patients that need precise correction or complex offloading we offer custom cast orthotics that are created to address your specific needs. Available for pick up within 48 hrs.</p>
            </div>
        </div>
    </div>
</div>