Bootstrap 3个长柱压倒别人

Question

上面的第一张图正是我想要的，但其他图片显示了我所得到的

使用 Bootstrap 3:

试验1：如第二张图所示，当col-sm-8的高度与其对应列的高度不同时，侧边栏col-sm-2将col-sm-8向下推：

  <div class="container">
    <div class="row">
       <div class="col-sm-8">1</div>
       <div class="col-sm-2">2</div>
       <div class="col-sm-8">3</div>
    </div>
  </div>

试验 2：如第三张图片所示，边栏与第二张图片对齐 col-sm-8 但我希望它与第一列水平对齐：

  <div class="container">
     <div class="row">
        <div class="col-sm-8">1</div>
        <div class="col-sm-8">3</div>
        <div class="col-sm-2">2</div>
     </div>
 </div>

如果我做类似下面的事情，效果很好，但我希望 col-sm-2 位于右侧：

    <div class="container">
       <div class="row">
          <div class="col-sm-2">2</div>
          <div class="col-sm-8">1</div>
          <div class="col-sm-8">3</div>
       </div>
    </div>

Answer 1

你快到了。您只是缺少几个 div。

<div class="container">
   <div class="row">
      <div class="col-sm-10">
         <div class="row">
            <div class="col-sm-12">1</div>
            <div class="col-sm-12">3</div>
         </div>
      </div>
      <div class="col-sm-2">2</div>
   </div>
 </div>

Bootstrap 3个长柱压倒别人

Bootstrap 3 long columns push others down

css

twitter-bootstrap

twitter-bootstrap-3