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>

Answer 1

只需使用class="col-4"就足够了

您不需要所有这些样式col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4

<link rel="stylesheet" 
 href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
 integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
 crossorigin="anonymous">

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

Answer 2

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

移动和桌面上的Boostrap 4 Grid System

2 个答案: