css - Bootstrap 堆积柱

标签 css twitter-bootstrap-3 bootstrap-grid

我有一个愚蠢的 Bootstrap 问题。

Problem visualized

代码:

<div class="row">
  <div class="col-sm-4" style="background-color:pink;"> lorem... </div>
  <div class="col-sm-8" style="background-color:yellow;"> lorem... </div>
  <div class="col-sm-4" style="background-color:pink;"> lorem... </div>
</div>

我想将最后一个粉红色的 div 放入其上方的空间中。 实现我的目标最简单的方法是什么?

最佳答案

<div class="row">
  <div class="col-sm4">
      <div class="row">
          <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
          <div class="col-sm-12" style="background-color:pink;"> lorem... </div>
      </div>
  </div>
  <div class="col-sm-8" style="background-color:yellow;"> lorem... </div>
</div>

关于css - Bootstrap 堆积柱,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45486167/

相关文章:

html - 垂直对齐并排 div 中的内容

html - 实现自定义 CSS 技能栏

javascript - css 在 chrome 中加载背景图像,但在 firefox 中不加载

html - 宽度为百分比的 `position:fixed` 侧边栏?

javascript - select2 改变背景颜色

html - 元素周围的背景,但不在其后面

html - 为什么 bootstrap 中的 media-body 类宽度为 10,000px 而 media 类 overflow hidden 和缩放 1?

jquery - 将表单发布的结果放入 Bootstrap 3 中的模式中

twitter-bootstrap - 带有输入组的 Bootstrap 面板

html - 粘性导航栏不滚动