html - Bootstrap 良好对齐

Question

在客户端脚本中，我生成了 html div，所以结果看起来像这样

<div class="col-sm-6 col-md-4">
    <div class="well">
        <div>Content here</div>
    </div>
</div>

问题是内容太长了。在那种情况下，一口更大的井会让其他人“在它后面”对齐。有没有办法让这些孔与红色箭头指向的位置对齐？

Answer 1

这是尝试在您希望它中断的地方使用行。每行不能超过 12 列，因此如果不将代码分成多行，您的代码将无法工作。

<div class="row">
  <div class="col-md-4">
    <div class="well">
      <div>Content here 1</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="well">
      <div>Content here 2
        <br/> Roast Duck
        <br/> Roast Duck
        <br/> Roast Duck
        <br/>
      </div>
    </div>
 </div>
 <div class="col-md-4">
    <div class="well">
      <div>Content here 3</div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-4">
    <div class="well">
      <div>Content here 4</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="well">
      <div>Content here 5</div>
    </div>
  </div>
</div>

工作 JSFiddle 示例:https://jsfiddle.net/jennifergoncalves/fcwbt7e6/