css - Bootstrap 3 长列将其他人推倒

Question

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

使用 Bootstrap 3:

试验 1:如第二张图所示，侧边栏 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>