Bootstrap很好地对齐

时间:2017-06-23 20:59:26

标签: html css twitter-bootstrap layout

在客户端脚本中,我生成html div,结果看起来像

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

问题在于内容是否很长。在那种情况下,一个更大的井使其他人在它后面对齐&#34;。有没有办法让这些井对齐红色箭头指向的位置?

well not aligned correctly

1 个答案:

答案 0 :(得分:0)

这是尝试利用您希望它破坏的行。每行不能超过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/