Html CSS：使用引导创建特定布局

我正在尝试使用引导创建特定布局：

但在我的布局中无法实现两个主要原则：

在第一行中，div2应该“粘贴”到其列的底部（在div1的高度上中继）

在第二行中，我有3个div要在中心对齐（使用引导网格系统时！）

编辑：关于第二行：我尝试使用3列，比如说每个div使用3列（因为我想要右边和左边的边距），但我仍然保留3个偏移量，我无法平均分割。 因此，我决定将其更改为col-4，并添加一个边框容器，这是我的解决方案：

<div class="container" style="padding: 0 80px;">
<div class="row">
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div1</div>
    </div>
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div2</div>
    </div>
    <div class="col-xs-4">
        <div style="border:solid 1px black;">Div3</div>
    </div>
</div>
</div>

第一组
第二组
第三组

希望有人能解释我如何处理这两个问题

这样就足够了吗

.div1{position:relative;margin-top:20px;float:left;}
.div2{position:absolute;float:left;right:0px;top:40px;}

至于3个div行，我会用另一个div来包装这三个div，将包含其他三个div的一个div放在中间

    // Classes
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as mixins
.element {
  .center-block();
}

---

from:

对于.div2，您可以使用带%

       .div2 {margin-top:50%}

---

对于你的第二期，上面所说的将起作用， 下面是代码的外观：

<div class="row">
                     <div class="wrap">
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div1</div>
</div>
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div2</div>
</div>
<div class="col-xs-4">
    <div style="border:solid 1px black;">Div3</div>
</div>
   </div>

---

我看不出你的解决方案与引导网格系统有什么关系（更确切地说，是你的第二行解决方案）。第二个块是从网站复制的，第一个块是自定义css2。使用包装器的传统方法，使用margin auto将其居中，并在其中使用网格系统，以便每个div的宽度为4列（共12列）。或者，您可以使用offset类。1。使用多种技术使立柱均衡。（谷歌）。然后您可以使用最小宽度处的绝对位置来获得底部的div2。2.建议创建另一个包装器（如@MatthewRath）。因此，您可以在行周围做一个包装，然后使包装80%，然后使用自动边距将其居中。

        .wrap {width:50% ; margin:0 auto } //or 800px or whatever