Question

我只是想知道.col的规格。我认为.col只是意味着它同样将所有元素放在同一行......但是我的代码将我的第三个元素推到另一行。怎么会？（我正在使用Bootstrap 4。）

<section class="portfolio colored-block" id="portfolio">
    <div>
        <h2>Portfolio</h2>
        <div class="row">
            <div class="col">
                <img src="http://qlip.in/images/YMCA-Realtor-Donation-3.jpg">
                <p>Consequat et ex sunt sunt cupidatat amet. Magna ad nostrud aute officia fugiat. Veniam consequat ex pariatur ex esse laboris non laboris in duis laboris consectetur ullamco nulla. Click <a href="#">here</a> for more information.</p>
            </div>
            <div class="col">
                <img src="http://qlip.in/images/YMCA-Realtor-Donation-3.jpg">
                <p>Consequat et ex sunt sunt cupidatat amet. Magna ad nostrud aute officia fugiat. Veniam consequat ex pariatur ex esse laboris non laboris in duis laboris consectetur ullamco nulla. Click <a href="#">here</a> for more information.</p>
            </div>
            <div class="col">
                <img src="http://qlip.in/images/YMCA-Realtor-Donation-3.jpg">
                <p>Consequat et ex sunt sunt cupidatat amet. Magna ad nostrud aute officia fugiat. Veniam consequat ex pariatur ex esse laboris non laboris in duis laboris consectetur ullamco nulla. Click <a href="#">here</a> for more information.</p>
            </div>
        </div>
    </div>
</section>

Answer 1

图像没有足够的空间，所以cols包裹。在图像上使用img-fluid，以便它们可以相应地缩放...

https://www.codeply.com/go/RL7FuDXZ7X

   <div class="row">
            <div class="col">
                <img class="img-fluid" src="http://qlip.in/images/YMCA-Realtor-Donation-3.jpg">
                <p>Consequat et ex sunt sunt cupidatat amet. Magna ad nostrud aute officia fugiat. Veniam consequat ex pariatur ex esse laboris non laboris in duis laboris consectetur ullamco nulla. Click <a href="#">here</a> for more information.</p>
            </div>
            <div class="col">
                <img class="img-fluid" src="http://qlip.in/images/YMCA-Realtor-Donation-3.jpg">
                <p>Consequat et ex sunt sunt cupidatat amet. Magna ad nostrud aute officia fugiat. Veniam consequat ex pariatur ex esse laboris non laboris in duis laboris consectetur ullamco nulla. Click <a href="#">here</a> for more information.</p>
            </div>
            <div class="col">
                <img class="img-fluid" src="http://qlip.in/images/YMCA-Realtor-Donation-3.jpg">
                <p>Consequat et ex sunt sunt cupidatat amet. Magna ad nostrud aute officia fugiat. Veniam consequat ex pariatur ex esse laboris non laboris in duis laboris consectetur ullamco nulla. Click <a href="#">here</a> for more information.</p>
            </div>
    </div>

Answer 2

＆＃34; col＆＃34;之间的主要区别而其他的只有＆＃34; col＆＃34;如果指定，则行中的所有列都不会堆叠。无论浏览器的宽度如何，它们都是并排的。通过指定断点（sm，md等），它基本上告诉列何时换行。通过指定一个数字，它基本上告诉列必须在必要时进行换行以保持最小宽度（6表示50％，4表示33％等）。

class =“col”和class =“col-xs / sm / md / lg-6”之间的区别

2 个答案: