Bootstrap三列三行，第三列跨越高度

Question

我正在尝试使用col-lg-4实现下面的布局。

我只需要知道如何使第三列跨越所有三行并且不会在行之间创建巨大的空白空白。这是它目前的样子：

这是否可以在Bootstrap中进行（不使用使用Bootstrap 2 span类）？

这是代码（一般化）

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-4">
      Praesent laoreet purus in elementum.
    </div>
    <div class="col-lg-4">
      Praesent laoreet purus in elementum.
    </div>
    <div class="col-lg-4">
      <!-- THIS NEEDS TO ROW SPAN -->
      <p>Praesent posuere egestas sagittis. Sed feugiat nibh urna, egestas elementum ipsum facilisis et. Nullam elit nisi, tincidunt a turpis ac, fringilla pellentesque nibh. Suspendisse pulvinar orci sit amet metus laoreet, sed tincidunt quam semper. Vestibulum
        ac nunc a justo vulputate venenatis vel sit amet augue. Vestibulum eu hendrerit sem. Aenean nec tempus ipsum. Integer nec lectus varius, venenatis orci vitae, efficitur mi. Curabitur at consectetur leo, sit amet consectetur nisi. Nam nec eros
        facilisis, aliquam sem molestie, auctor elit. Vivamus quis hendrerit justo, vel molestie ligula.</p>

      <p>Morbi leo magna, sollicitudin a sem ac, finibus facilisis ex. Nam ut enim commodo, venenatis augue nec, consectetur velit. Sed lobortis vitae lacus at pulvinar. Aliquam vel enim tristique, lacinia nibh ut, porta dui. Fusce efficitur volutpat lectus
        maximus iaculis. Proin purus odio, auctor id sollicitudin nec, lacinia vel ligula. Sed luctus ipsum non sem tincidunt mollis.</p>

      <p>Pellentesque congue mauris non tempor tincidunt. Phasellus pretium at lorem ut auctor. Donec rhoncus, nibh vitae aliquam tristique, leo quam elementum nisl, at porttitor massa diam venenatis diam. Suspendisse potenti. Sed gravida, mauris nec rhoncus
        feugiat, augue velit facilisis mauris, et dapibus nisl augue non nunc. Nunc pretium quam eget tincidunt sollicitudin. Etiam maximus metus eget accumsan efficitur. Fusce a lorem vitae libero blandit condimentum.</p>
    </div>
    <div class="col-lg-4">
      Praesent laoreet purus in elementum.
    </div>
    <div class="col-lg-4">
      Praesent laoreet purus in elementum.
    </div>
    <div class="col-lg-4">
      Praesent laoreet purus in elementum.
    </div>
  </div>
</div>

Answer 1

您需要使用嵌套的col-，在这种情况下，请使用col-lg-8 + col-lg-4

并在col-lg-8内使用cols

创建嵌套row

为演示添加col-xs-*。

[class*="col-"] {
  border: red dashed 1px
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-8 col-lg-8">
      <div class="row">
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
        <div class="col-xs-6 col-lg-6">
          Praesent laoreet purus in elementum.
        </div>
      </div>
    </div>
    <div class="col-xs-4 col-lg-4">
      Praesent laoreet purus in elementum.Praesent laoreet purus in elementum.Praesent laoreet purus in elementum. Praesent
    </div>
  </div>
</div>