html - 移动和桌面上的 Boostrap 4 Grid System

Question

我想使用 boostrap 4 构建一个网格系统，我有一份报纸，在平板电脑/桌面模式下每行显示三列，而不是在移动模式下，我只想每行显示一列。此链接的文档https://getbootstrap.com/docs/4.1/layout/grid/ 描述了跨多个设备的类前缀。在平板电脑/桌面模式下，一切运行良好，但在移动模式下，我遇到了问题。

这张图片显示了应该如何在移动模式下

这张照片显示了我在移动模式下遇到的问题

这是代码：

<div class="container">
<div class="row no-gutters">
  <!-- Article 1 -->     
       <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
         <div class="content">
            <div id='column1' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
    <!-- Article 2 -->
       <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
        <div class="content">
            <div id='column2' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
    <!-- Article 3 -->
       <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
        <div class="content">
            <div id='column3' class="column">
            Lorem ipsum etc...
            </div>
        </div>
    </div>
</div>

标签： htmlcssbootstrap-4

Answer 1

首先col-sm-12 col-lg-4 col-xl-4是不必要的。引导网格运行良好。也许你的标题（SERIE BI）太长了。试着给它max-width: 100%