Bootstrap 4 col 响应式答案

【问题标题】：Bootstrap 4 col responsiveBootstrap 4 col 响应式
【发布时间】：2017-12-12 08:24:33
【问题描述】：

我正在使用 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>

在分辨率 setup-2

如何将其更改为像这样设置 col：setup-3

我正在寻找负责该问题的 Bootstrap 代码的某些部分，但没有成功。有什么方法可以覆盖我的“style.css”吗？

【问题讨论】：

您在卡片 div 中添加了什么代码？如果您的引导程序副本未更改，则问题可能来自some image / some text 部分

标签： twitter-bootstrap bootstrap-4 responsive

【解决方案1】：

相反

<div class="col">

你可以使用：

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

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

【讨论】：