Bootstrap：使用网格系统获取三个不同大小的项目

Question

我正在尝试获得3个不同的组件以同样垂直放置，左侧菜单，主图像和2个侧面图像。

这是我到目前为止的片段：

http://www.bootply.com/xcIWtG0Z7w

2件事：

左侧组件的底部，侧面图像的中间图像和底部图像应该对齐（以及相应的顶部），2，我可能不会提前知道图像的大小。

无论如何使用网格系统来执行此操作？我一直在玩它，唯一有效的是当我改变图像大小时断开的任意边距。我真的不是一个前端人员所以我很确定我只是没有正确地描绘它。

提前致谢。

编辑：这是预期的外观（现在可以使用）：

Answer 1

以下是demo如何实现此目标

此处的关键元素是vertical-align

中的内容

<div class="col-xs-6 col-height col-top">
    <div class="inside">
      <div class="content">
        <img src="https://placeholdit.imgix.net/~text?txtsize=9&amp;bg=654321&amp;txtclr=ffffff&amp;txt=LEFT%20MENU&amp;w=200&amp;h=550">
      </div>
    </div>
  </div>

这里是css

.col-height {
  display: table-cell;
  float: none;
  height: 100%;
}
.col-top {
  vertical-align: bottom;
}

现在，对于包含多个图像的列，您可以在内部或任何可以在2个图像之间添加填充的任何内容中创建多个div。

我希望你能得到它的一般概念