使用 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

您自己的 CSS 包含：

.cast {
    position: absolute;
    left: 535px; 
    top: 425px;
    width: 300px;
    padding: 50px 0 0 0;
    font-size: 15px;    
}

所以你的第三个 div 是绝对定位的。 F12 是你的朋友。

Answer 2

您的 class“.cast”使用左 535px 和上 425px 的定位，这迫使它向下移动。

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

<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>

Answer 3

div 在容器外，您应该使用带行的 col-* 以确保它们在同一行中对齐。您的代码将如下所示：

<div class="container">
    <div class="row">
        <div class="col-md-4">
            ...
        </div>
        <div class="col-md-4">
            ...
        </div>
        <div class="col-md-4">
            ...
        </div>
    </div>
</div>

使用 Bootstrap 向下推列

Column being pushed down using Bootstrap

javascript

position

twitter-bootstrap