移动和桌面上的Boostrap 4 Grid System

时间:2019-07-06 15:45:43

标签: html css bootstrap-4

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

此图显示了在移动模式下的状态

enter image description here

此图片显示了我在移动模式下遇到的问题

enter image description here

这是代码:

<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>

2 个答案:

答案 0 :(得分:0)

只需使用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>

答案 1 :(得分:0)

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