引导网格和行对齐问题答案

【问题标题】：Bootstrap grid and row alignment issue引导网格和行对齐问题
【发布时间】：2016-08-18 18:23:18
【问题描述】：

我正在尝试实现如图所示的以下布局：

我希望 col-xs-8 和 col-xs-4 都从相同的高度开始，所以我将它们放在一排，将较低的 col-xs-8 放在另一排。我得到的是以下内容：

有没有办法解决这个问题并正确显示两列？我还希望两列的高度完全相同。较低的 col-xs-8 具有固定的高度。谢谢！

【问题讨论】：

标签： html css twitter-bootstrap alignment

【解决方案1】：

<div class ='row'>
  <div class='col-md-8'>
    <div style='background:green' class='col-md-12'>a</div>
    <div style='background:yellow' class='col-md-12'>b</div>
  </div>
  <div class='col-md-4'>
    <div style='background:red' class='col-md-12'>c</div>
  </div>
</div>

示例https://jsfiddle.net/43tq748r/

【讨论】：

它对我不起作用，因为我在这个小提琴中有两行：jsfiddle.net/pcnjw6ud

【解决方案2】：

将pull-right 类添加到第二个元素。此类将float:right; 属性添加到元素。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-4 bg-warning">Lorem Ipsum is simply dummy text.</div>
  <div class="col-xs-8 bg-primary pull-right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  <div class="col-xs-4 bg-success">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>

【讨论】：

【解决方案3】：

试试这个代码，看看 bootplay 链接：

<div class="row-fluid">
  <div class="container">
    <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 test">
        col-8
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 test1">
        col-8
      </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 test2">
        col-4
      </div>
    </div>
  </div>
</div>

/* 这里使用的 CSS 将在 bootstrap.css 之后应用 */

.test {
  background-color: #ff0000;
  border: 1px solid;
  color: #ffffff;
}
.test1 {
  background-color: #000000;
  border: 1px solid;
  color: #ffffff;
}
.test2 {
  background-color: #008000;
  border: 1px solid;
  color: #ffffff;
}

http://www.bootply.com/nR4VPtCzy6

【讨论】：

【解决方案4】：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class ='row'>
  <div class='col-xs-12'>
   <div class="col-xs-8" style="height:50px;background:red">col-xs-8</div>
  <div class="col-xs-4 pull-right" style="background:green;height:200px">col-xs-4</div>
  <div class="col-xs-8" style="background:yellow;height:150px">col-xs-8</div>
</div>
  </div>

【讨论】：

【解决方案5】：

您可以使用此代码并根据需要对每列应用高度。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="row">
    <div class="col-xs-8" style="background-color:lavender;">
       <div class="row">
          <div class="col-xs-12" style="background-color:lavenderblush;height:50px;">col-xs-8</div>
          <div class="col-xs-12" style="background-color:lavenderblush;height:50px;">col-xs-8</div>
       </div>
    </div>
       
    <div class="col-xs-4" style="background-color:lavenderblush;height:100px;">col-xs-4</div>
  </div>

【讨论】：