Question

我有一个3列的行。在小型设备中，我想把它变成第二行＆＃34; ＆＃34;第二行＆＃34;就像一个倒金字塔。

有可能吗？

我尝试使用像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>

Answer 1

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

然后删除不需要的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>

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

Answer 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

Answer 4

在您的专栏<div class="col-sm-6 col-md-4 col-lg-4">中，＆＃39; sm＆＃39;，＆＃39; md＆＃39;和＆＃39; lg＆＃39;对应于小型，中型和大型设备。总共有12个＆＃39;使用，Bootstrap将在这方面自动处理所有更改。

当您为中型和大型设备使用4列宽度的4列时，大型设备上不应该出现任何问题。如果有问题，那是因为您已经在某处添加了自己的负边距。检查一下。

要使其显示为反向pyramind，您需要集中第三个结果。对于前两个列，您需要<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;
}

希望这有帮助！

Bootstrap 3列到2行

4 个答案: