引导 3 列到 2 行答案

【问题标题】：Bootstrap 3 columns to 2 rows引导 3 列到 2 行
【发布时间】：2017-05-19 05:14:39
【问题描述】：

我有一排有 3 个列。在小型设备中，我想将它变成“第一行”中的两个列和“第二行”中的一个居中列，就像一个反向金字塔一样。

有可能吗？

我尝试使用一些答案，例如 this one 什么有效，但是当我回到大屏幕时，事情变得一团糟。

<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4">
    <figure class="box-1">
        <img class="services-imgs" src="images/page1-img01.jpg" alt="rehab" />
        <figcaption class="figcaption"><a href="serviços.html">Reabilitação Vestibular</a></figcaption>
    </figure>
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
    <figure class="box-1">    
        <img class="services-imgs" src="images/page1-img02.jpg" alt="drenagem" />
        <figcaption class="figcaption"><a href="serviços.html">Fisioterapia Estética</a></figcaption>
    </figure>          
</div>
<div class="col-sm-6 col-md-4 col-lg-4">
    <figure class="box-1">
        <img class="services-imgs" src="images/traumato.jpg" alt="traumato-ortopédica" />
        <figcaption class="figcaption"><a href="serviços.html">Fisioterapia Traumato-Ortopédica</a></figcaption>
    </figure>            
</div>
</div>

【问题讨论】：

您可以通过媒体查询对单独的 CSS 文件进行特定更改以使其正常工作

标签： html css twitter-bootstrap

【解决方案1】：

您可以将col-sm-6更改为col-xs-6（适用于x-small和小屏幕）

然后删除不需要的col-lg-4（col-md-4 类适用于中等到所有较大的尺寸，除非另有说明）

完成后，您可以像这样简单地向最后一列添加偏移量： class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-0"

基本上，如果xs 将其偏移 3 列（然后将其居中），它会移除中等或更高屏幕的偏移量。

请看下面的演示

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 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">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-xs-6 col-md-4">
    <figure class="box-1">
      <img class="services-imgs" src="http://lorempixel.com/300/300" alt="rehab" />
      <figcaption class="figcaption"><a href="serviços.html">Reabilitação Vestibular</a>
      </figcaption>
    </figure>
  </div>
  <div class="col-xs-6 col-md-4">
    <figure class="box-1">
      <img class="services-imgs" src="http://lorempixel.com/300/300" alt="drenagem" />
      <figcaption class="figcaption"><a href="serviços.html">Fisioterapia Estética</a>
      </figcaption>
    </figure>
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-0">
    <figure class="box-1">
      <img class="services-imgs" src="http://lorempixel.com/300/300" alt="traumato-ortopédica" />
      <figcaption class="figcaption"><a href="serviços.html">Fisioterapia Traumato-Ortopédica</a>
      </figcaption>
    </figure>
  </div>
</div>

【讨论】：

比我快 2 秒 :D。但你的更好。
好的，它工作正常，但在智能手机等屏幕中，我只需要 1 列和 3 个“行”。所以我不得不保留 。谢谢大家:)
那么你总是可以说col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0来区分XS和SM屏幕

【解决方案2】：

注意：有关更深入的解决方案，请参阅 ochi 的回答。

我想你想要这样的东西：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
	<div class="row">
		<div class="col-sm-6 col-md-4">First</div>
		<div class="col-sm-6 col-md-4">Second</div>
		<div class="col-sm-offset-3 col-sm-6 col-md-offset-0 col-md-4">Third</div>
	</div>
</div>

此代码不需要任何自定义 CSS。

【讨论】：

【解决方案3】：

像这样：

div{
  background: lightblue;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-4 col-sm-6 col-xs-6">1</div>
  <div class="col-md-4 col-sm-6 col-xs-6">2</div>
  <div class="col-md-4 col-sm-12 col-xs-12">3</div>
</div>

您只需要根据屏幕大小指定行为，例如col-md-4 col-sm-6

【讨论】：

这会改变小屏幕上最后一列的宽度（这可能是也可能不是理想的结果）

【解决方案4】：

在您的<div class="col-sm-6 col-md-4 col-lg-4"> 行中，“sm”、“md”和“lg”对应于小型、中型和大型设备。总共有 12 个“段”可供使用，Bootstrap 将自动为您处理这方面的所有更改。

由于您为中型和大型设备使用 3 列的 4 宽度，因此在大型设备上应该没有任何问题。如果有问题，那是因为您在某处添加了自己的负边距。检查一下。

要让它像倒金字塔一样显示，您需要集中第三个结果。对于您的前两列，您需要<div class="col-sm-6 col-md-4 col-lg-4">。对于第三列，您需要 col-sm-12 确保它在移动设备上占据整个宽度（没有其他列）。然后，您需要将该列的第一个子项变为 50% 的宽度。在这种情况下，就是<figure>。

.col-md-4:nth-of-type(3) figure {
    width: 50%;
    display: block;
    margin: auto;
}

希望这会有所帮助！

【讨论】：