如何在引导程序中将垂直内容堆叠到水平

Question

我正在尝试在boostrap 3中进行此设置，有没有办法做到这一点？

Answer 1

你必须学习grid bootstrap system。您可以定义每个设备的大小。 Take a look at bootstrap。这个想法很简单，col-xs定义了手机的宽度，col-sm定义了平板电脑的宽度，col-md定义了桌面宽度，col-lg定义了像TV这样的大型设备。

请参阅下面的示例，您可以预览（如移动设备），然后点击＆＃34;整页＆＃34;预览更大的设备。

我希望它有所帮助

＆＃13;

＆＃13;

.well{
  font-size:40px;
  font-weight: 500;
  text-align:center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  
  
  <div class="col-sm-6 col-xs-12 well">
    
    1
    
  </div>
  
  
  <div class="col-sm-3 col-xs-12">
    
    <div class="col-sm-12 col-xs-6 well">
      2.1
    </div>
    
    
    <div class="col-sm-12 col-xs-6 well">
      2.2
    </div>
    
  </div>
  
  <div class="col-sm-3 col-xs-12">
    
    
    <div class="col-sm-12 col-xs-6 well">
      3.1
    </div>
    
    
    <div class="col-sm-12 col-xs-6 well">
      3.2
    </div>
    
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这很容易做到，您只需要将其设置为嵌套结构，并将正确的col-lg-x，col-md-x，col-sm-x，col-xs-x类应用于每个级别。

这是一个快速的小投掷，完全符合您的要求：

div {
    border: 1px solid black;
    padding: 10px;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://getbootstrap.com/dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">1</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">2.1</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">2.2</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">3.1</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">3.2</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">4.1</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">4.2</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">5.1</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-6">5.2</div>
    </div>
</div>

注意：我添加了1px border和10px padding，以使其更加引人注目。

为了更好地演示这一点，这里是一个Bootply：http://www.bootply.com/WOrm6c6sm1

参考文献：http://getbootstrap.com/css/#grid

Answer 3

肯定有，我建议你看一下bootstrap的网格系统文档（下面的链接）。这个接缝是一个相对简单的问题，只需通过使用嵌套网格来解决，但为了让你开始我已经让你成为这个东西。

首先阅读

http://getbootstrap.com/css/#grid

<div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-8">
          <div class="bigBox"></div>
        </div>
        <div class="col-xs-12 col-sm-4">
          <div class="col-xs-6">
            <div class="smallBox"></div>
          </div>
          <div class="col-xs-6">
            <div class="smallBox"></div>
          </div>
        </div>
      </div>
    </div>

http://plnkr.co/edit/bQRdmdd1eSSpJ27Pghzj?p=preview