html - Bootstrap div 列高度更改其他 div 的位置

标签 html css twitter-bootstrap

<分区>

我在使用 <div class="col-md-X"> 时遇到布局问题 Bootstrap 。通过在 div 中放置大量内容,它会强制其他 div 到另一个位置。

这是我的 html 布局:

<div class="row">
  <div class="col-md-7 content"></div>
  <div class="col-md-4 col-md-offset-1"></div>
  <div class="col-md-7 content"></div>
  <div class="col-md-4 col-md-offset-1"></div>
  <div class="col-md-7 content"></div>
</div>

这基本上会创建如下内容:

|    col-md-7    | | col-md-4  |  
|    col-md-7    | | col-md-4  |  
|    col-md-7    | | 

但是,当我在其中放置大量内容时,例如,第二个 col-md-4它强制最后一个 col-md-7下去。

|    col-md-7    | | col-md-4  |  
|    col-md-7    | | col-md-4  |  
|                | |  content
|                | |  content
|                | |  content
|    col-md-7    | |  

如图所示

enter image description here

问题可见JSFiddle .

我希望最终结果是:

|    col-md-7    | | col-md-4  |  
|    col-md-7    | | col-md-4  |  
|    col-md-7    | |  content
|                | |  content
|                | |  content

最佳答案

尝试创建如下布局

Layout

<row>
 <col-md-7>
   <row>
     <col-md-12></col-md-12>
   </row>
   <row>
     <col-md-12></col-md-12>
   </row>
 </col-md-7>
 <col-md-4>
   <row>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
     <col-md-12></col-md-12>
   </row>
  </col-md-4>
</row>

关于html - Bootstrap div 列高度更改其他 div 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39229171/

相关文章:

css - Bootstrap 形式的内联输入和图像

javascript - 当缺少唯一标识符时,选择同一列中除一个之外的所有 td 元素

html - 用于高分辨率屏幕的响应式 CSS 网格

javascript - 如何用 Flot 显示空白图形

html - SVG 图像未固定到 Bootstrap 父列 div 中

javascript - Bootstrap 介入 datatable css

html - CSS中的半椭圆形

html - 2 列布局中不需要的空间

html - CSS - 如何在表格中的列之间添加行

jquery css 缩放图标到不透明的图像