Bootstrap 4-Col 2-Row div 响应式答案

【问题标题】：Bootstrap 4-Col 2-Row div responsiveBootstrap 4-Col 2-Row div 响应式
【发布时间】：2016-11-06 18:07:08
【问题描述】：

如何在移动设备上响应引导程序中的 4 x 2 Column Div？最好是让它们在某个断点处相互塌陷。

<div class="row">
    <div class="col-lg-12">
    <div class="services-col-1">
    <div class="col-xs-3" id="p1"><strong>Heading One</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
    <div class="col-xs-3 col-half-offset" id="p2"><strong>Heading Two</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
    <div class="col-xs-3 col-half-offset" id="p3"><strong>Heading Three</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
    <div class="col-xs-3 col-half-offset" id="p4"><strong>Heading Four</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>
    <div class="col-xs-3 col-half-offset" id="p5"><strong>Heading Five</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div>    
    <div class="col-xs-3 col-half-offset" id="p6"><strong>Heading Six</strong><p>Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.Mauris tristique pharetra luctus. Curabitur fermentum orci at sapien sollicitudin, maximus viverra sem tincidunt. sem tincidunt.</p></div> 
    </div>

【问题讨论】：

你能做狙击手，做的更具体吗。
你能把你的问题说清楚吗？
我的错误我的意思是 4 列 2 行。它在桌面上显示为应有的效果，但是当宽度减小时，它们会变窄。我需要它们在较小的屏幕尺寸上相互折叠。

标签： css twitter-bootstrap media-queries multiple-columns

【解决方案1】：

如果我理解正确，您需要两行四列，如果是的话。正如您所提到的，Bootstrap 有一个解决方案。

在一排中总共必须有最多 12 个列。 12 total / 4 columns = 3 (col-*-3)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div class="col-xs-3 col-sm-3">
      One of four columns
    </div>
    <div class="col-xs-3 col-sm-3">
      One of four columns
    </div>
    <div class="col-xs-3 col-sm-3">
      One of four columns
    </div>
      <div class="col-xs-3 col-sm-3">
      One of four columns
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3 col-sm-3">
      One of four columns
    </div>
    <div class="col-xs-3 col-sm-3">
      One of four columns
    </div>
    <div class="col-xs-3 col-sm-3">
      One of four columns
    </div>
      <div class="col-xs-3 col-sm-3">
      One of four columns
    </div>
  </div>
</div>

【讨论】：

屏幕缩小到移动设备后，有没有办法让每个 div 相互折叠？因为我将在每个 div 中至少有一段文本。

【解决方案2】：

一种可能的方法是使用.col-xs-12 类来定位移动设备。

查看此Codepen

或者看看下面的sn-p：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-3">
      One of four columns
    </div>
    <div class="col-xs-12 col-sm-3">
      One of four columns
    </div>
    <div class="col-xs-12 col-sm-3">
      One of four columns
    </div>
      <div class="col-xs-12 col-sm-3">
      One of four columns
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-3">
      One of four columns
    </div>
    <div class="col-xs-12 col-sm-3">
      One of four columns
    </div>
    <div class="col-xs-12 col-sm-3">
      One of four columns
    </div>
      <div class="col-xs-12 col-sm-3">
      One of four columns
    </div>
  </div>
</div>

希望这会有所帮助！

【讨论】：