Question

我正在使用Bootstrap并且在响应式布局方面存在一些问题。我有2行，我使用4列，如下所示： setup-1

代码：

<div class="container">
    <div class="row">
        <div class="col">
            <div class="card">
                some image
                some text
            </div>
        </div>
        <div class="col">
            <div class="card">
                some image
                some text
            </div>
        </div>
        <div class="col">
            <div class="card">
                some image
                some text
            </div>
        </div>
        <div class="col">
            <div class="card">
                some image
                some text
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="card">
                some image
                some text
            </div>
        </div>
        <div class="col">
            <div class="card">
                some image
                some text
            </div>
        </div>
        <div class="col">
            <div class="card">
                some image
                some text
            </div>
        </div>
        <div class="col">
            <div class="card">
                some image
                some text
            </div>
        </div>
    </div>
</div>

关于解决方案＆lt; 1200px它变成这样的东西：setup-2

如何将其更改为如下设置col：setup-3

我正在寻找负责这一点的Bootstrap代码的一部分，但没有成功。有没有办法在我的＆＃39; style.css＆＃39;？

中覆盖

Answer 1

相反

<div class="col">

您可以使用：

<div class="col-xl-3 col-lg-6">

您可以通过以下链接阅读有关Bootstrap网格的更多信息： https://www.w3schools.com/bootstrap4/bootstrap_grid_basic.asp

Bootstrap 4 col响应

1 个答案: