html - 具有流体高度重叠内容的 Bootstrap col

Question

假设我有一个包含两列的 .row，一个包含大量文本的 .col-md-9 和一个 .col-md-3 内容较少，因此高度较小。

是否可以将 .col-md-9 中的文本重叠显示在 .col-md-3 下方？

例子:

.col-md-9,
.col-md-3 {
  border:1px solid red;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-9">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia nibh metus, et bibendum mi dignissim sed. Curabitur convallis sem vel velit finibus semper. Mauris venenatis in ex in aliquet. Aenean elementum massa vitae lacus suscipit viverra vel varius mauris. Nulla et volutpat velit, vitae aliquet nisi. Etiam sed tortor nisl. Praesent id leo sit amet elit placerat molestie viverra a lacus. Mauris eleifend, sem a pharetra commodo, tortor mauris lobortis leo, ac bibendum orci augue aliquet erat. Ut consequat ornare tortor eu ullamcorper.

Maecenas tempus aliquet elit. Fusce vel erat et magna consequat porttitor vitae ut elit. Mauris lectus elit, blandit nec consectetur quis, hendrerit at ante. Curabitur pharetra, est vitae suscipit bibendum, ex erat hendrerit odio, consequat aliquet nisi mi a tellus. Nam et leo nec mauris tristique faucibus. Morbi interdum sem sit amet libero laoreet, nec faucibus elit varius. Cras tempus, tortor in suscipit viverra, nisl turpis faucibus tortor, in luctus ex ipsum et ante. In pulvinar sed libero at semper.

Nullam iaculis finibus elit, vitae bibendum est dictum in. Quisque ac convallis nulla. Vestibulum nisl libero, semper sit amet feugiat vel, convallis non enim. Nulla nec volutpat nisl. Praesent at lacinia urna. Quisque euismod vitae magna eget feugiat. Quisque sed sapien erat. Donec pulvinar, velit in bibendum hendrerit, lorem massa dapibus nunc, a ornare velit lacus vel orci. Suspendisse lobortis ante sed arcu porttitor sodales. Fusce sagittis lacus in turpis maximus, at consequat eros maximus. Suspendisse eget varius elit, sed euismod elit. Aliquam pulvinar, eros quis fermentum congue, massa nunc finibus purus, id fermentum metus nisi at ante. Vivamus diam mauris, sollicitudin ac ultrices convallis, gravida in nunc. Vestibulum rhoncus, magna ut rutrum hendrerit, turpis odio tincidunt nisi, eget venenatis lorem lectus vitae erat. Sed fringilla velit at tortor iaculis dictum.

Mauris egestas sit amet justo ac faucibus. Pellentesque ac sapien dolor. Nunc ornare odio in diam tristique eleifend. Sed tempor dolor eu varius cursus. Sed cursus enim quam, vehicula tincidunt lacus condimentum vitae. Curabitur ut blandit eros. Nullam id laoreet urna, in tempus massa. Cras a vestibulum libero, sed vestibulum justo. Quisque euismod viverra massa, a cursus enim porta ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris luctus urna dolor, a tincidunt libero lobortis nec. Sed dictum, purus non lacinia pharetra, turpis magna egestas sapien, eu scelerisque enim mi vel neque. Etiam commodo eu ex scelerisque rhoncus. Vestibulum pellentesque in ligula in consequat. Vivamus rhoncus maximus rhoncus. Vivamus odio metus, ultrices non eros vel, consequat pellentesque augue.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas aliquam turpis in lacus scelerisque molestie. Nullam non suscipit massa. Fusce id magna a ipsum sodales malesuada ut vitae nisi. Aliquam vel suscipit nibh. Curabitur aliquet ante dui, ac consequat nulla vulputate ac. Cras sed gravida purus. Etiam auctor aliquam cursus. Suspendisse interdum erat quis tortor varius, a aliquet arcu imperdiet. Aliquam at quam vehicula elit vehicula fermentum id in velit. Vestibulum fringilla ex ut leo scelerisque, vel vehicula massa ornare. Vestibulum at neque non augue imperdiet consequat. Suspendisse potenti. Duis a nisi nec metus finibus blandit. In dolor urna, laoreet ac ex vitae, venenatis pharetra lorem. Nullam aliquam auctor neque, a sagittis nunc euismod quis.

Fusce laoreet suscipit urna, sed elementum justo venenatis in. Mauris imperdiet odio id est venenatis, nec ullamcorper velit tempus. Maecenas at sem quis eros volutpat accumsan sed ac justo. Nam vehicula tortor sit amet gravida euismod. Suspendisse sit amet ornare est, a commodo ipsum. Pellentesque eu magna sed eros lobortis posuere. Curabitur tortor lectus, consectetur eget nunc nec, consequat rhoncus orci. Ut tortor leo, pharetra et dolor ut, mollis semper ante. Integer ultrices tincidunt lectus, eu elementum mauris semper nec. Nullam metus arcu, sagittis vel euismod eget, scelerisque eget mi. Proin placerat lectus vel turpis varius, quis ornare nisi tristique. Donec tincidunt dui in justo dignissim lobortis.

Etiam pharetra quis nisl non ultrices. Aenean libero ligula, sollicitudin ac consequat ac, pulvinar ut tortor. In hac habitasse platea dictumst. Quisque tempor lectus elit, vitae vehicula lectus convallis nec. Proin iaculis egestas elit eu aliquet. Curabitur ultrices lacus sed quam auctor, quis porttitor lectus sollicitudin. Proin malesuada est tempor nulla pulvinar, in rutrum odio dictum. Ut sit amet sagittis sapien. Nullam egestas euismod quam, eu dictum eros placerat a. Sed tristique, sem nec scelerisque venenatis, erat ante condimentum ipsum, sed porttitor nibh felis non nulla. Donec vehicula accumsan est, eget semper ligula bibendum in. Nulla facilisi. Donec auctor purus sed scelerisque hendrerit. Donec quis libero id ipsum ultrices convallis.

Phasellus suscipit bibendum auctor. Nullam tristique felis et lacus pellentesque, in finibus lectus feugiat. Nullam quis laoreet justo, sed rhoncus tortor. Maecenas magna nulla, rhoncus sed ultrices at, imperdiet et felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla feugiat tortor et orci volutpat dignissim. Maecenas ut imperdiet magna. Praesent tristique tortor a nulla malesuada, non fermentum libero condimentum.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu eleifend dolor. Aliquam ultricies, erat sit amet maximus sagittis, justo velit sagittis purus, nec luctus risus mauris ac mauris. Maecenas dignissim tincidunt lectus, quis placerat tortor vestibulum nec. Aliquam feugiat diam sed justo rhoncus aliquam. Phasellus posuere tincidunt venenatis. Ut tristique velit turpis, eu euismod magna malesuada in. Duis vitae nunc aliquam, sodales lorem sit amet, iaculis metus. Proin tristique elit sed ornare pharetra. Fusce venenatis nunc ut mi tincidunt ullamcorper eu et enim. Nulla facilisi. Fusce eu consequat nunc. Sed aliquam fringilla convallis.</div>
  <div class="col-md-3"><img src="http://placehold.it/300x300"><h2>This is .col-md-3. The text in .col-md-9 should overflow bellow.</h2></div>
</div>

我可以模拟我期望用 .col-md-12 和 .col-md-3< 替换 .col-md-9 的结果 与 .float-right，但随后我失去了列的响应优势:

.float-right {
  border: 1px solid red;
  max-width: 300px;
  margin: 0 0 15px 15px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-12"><div class="float-right"><img src="http://placehold.it/300x300"><h2>This is a div with max-width and float-right.</h2></div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia nibh metus, et bibendum mi dignissim sed. Curabitur convallis sem vel velit finibus semper. Mauris venenatis in ex in aliquet. Aenean elementum massa vitae lacus suscipit viverra vel varius mauris. Nulla et volutpat velit, vitae aliquet nisi. Etiam sed tortor nisl. Praesent id leo sit amet elit placerat molestie viverra a lacus. Mauris eleifend, sem a pharetra commodo, tortor mauris lobortis leo, ac bibendum orci augue aliquet erat. Ut consequat ornare tortor eu ullamcorper.

Maecenas tempus aliquet elit. Fusce vel erat et magna consequat porttitor vitae ut elit. Mauris lectus elit, blandit nec consectetur quis, hendrerit at ante. Curabitur pharetra, est vitae suscipit bibendum, ex erat hendrerit odio, consequat aliquet nisi mi a tellus. Nam et leo nec mauris tristique faucibus. Morbi interdum sem sit amet libero laoreet, nec faucibus elit varius. Cras tempus, tortor in suscipit viverra, nisl turpis faucibus tortor, in luctus ex ipsum et ante. In pulvinar sed libero at semper.

Nullam iaculis finibus elit, vitae bibendum est dictum in. Quisque ac convallis nulla. Vestibulum nisl libero, semper sit amet feugiat vel, convallis non enim. Nulla nec volutpat nisl. Praesent at lacinia urna. Quisque euismod vitae magna eget feugiat. Quisque sed sapien erat. Donec pulvinar, velit in bibendum hendrerit, lorem massa dapibus nunc, a ornare velit lacus vel orci. Suspendisse lobortis ante sed arcu porttitor sodales. Fusce sagittis lacus in turpis maximus, at consequat eros maximus. Suspendisse eget varius elit, sed euismod elit. Aliquam pulvinar, eros quis fermentum congue, massa nunc finibus purus, id fermentum metus nisi at ante. Vivamus diam mauris, sollicitudin ac ultrices convallis, gravida in nunc. Vestibulum rhoncus, magna ut rutrum hendrerit, turpis odio tincidunt nisi, eget venenatis lorem lectus vitae erat. Sed fringilla velit at tortor iaculis dictum.

Mauris egestas sit amet justo ac faucibus. Pellentesque ac sapien dolor. Nunc ornare odio in diam tristique eleifend. Sed tempor dolor eu varius cursus. Sed cursus enim quam, vehicula tincidunt lacus condimentum vitae. Curabitur ut blandit eros. Nullam id laoreet urna, in tempus massa. Cras a vestibulum libero, sed vestibulum justo. Quisque euismod viverra massa, a cursus enim porta ac. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris luctus urna dolor, a tincidunt libero lobortis nec. Sed dictum, purus non lacinia pharetra, turpis magna egestas sapien, eu scelerisque enim mi vel neque. Etiam commodo eu ex scelerisque rhoncus. Vestibulum pellentesque in ligula in consequat. Vivamus rhoncus maximus rhoncus. Vivamus odio metus, ultrices non eros vel, consequat pellentesque augue.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas aliquam turpis in lacus scelerisque molestie. Nullam non suscipit massa. Fusce id magna a ipsum sodales malesuada ut vitae nisi. Aliquam vel suscipit nibh. Curabitur aliquet ante dui, ac consequat nulla vulputate ac. Cras sed gravida purus. Etiam auctor aliquam cursus. Suspendisse interdum erat quis tortor varius, a aliquet arcu imperdiet. Aliquam at quam vehicula elit vehicula fermentum id in velit. Vestibulum fringilla ex ut leo scelerisque, vel vehicula massa ornare. Vestibulum at neque non augue imperdiet consequat. Suspendisse potenti. Duis a nisi nec metus finibus blandit. In dolor urna, laoreet ac ex vitae, venenatis pharetra lorem. Nullam aliquam auctor neque, a sagittis nunc euismod quis.

Fusce laoreet suscipit urna, sed elementum justo venenatis in. Mauris imperdiet odio id est venenatis, nec ullamcorper velit tempus. Maecenas at sem quis eros volutpat accumsan sed ac justo. Nam vehicula tortor sit amet gravida euismod. Suspendisse sit amet ornare est, a commodo ipsum. Pellentesque eu magna sed eros lobortis posuere. Curabitur tortor lectus, consectetur eget nunc nec, consequat rhoncus orci. Ut tortor leo, pharetra et dolor ut, mollis semper ante. Integer ultrices tincidunt lectus, eu elementum mauris semper nec. Nullam metus arcu, sagittis vel euismod eget, scelerisque eget mi. Proin placerat lectus vel turpis varius, quis ornare nisi tristique. Donec tincidunt dui in justo dignissim lobortis.

Etiam pharetra quis nisl non ultrices. Aenean libero ligula, sollicitudin ac consequat ac, pulvinar ut tortor. In hac habitasse platea dictumst. Quisque tempor lectus elit, vitae vehicula lectus convallis nec. Proin iaculis egestas elit eu aliquet. Curabitur ultrices lacus sed quam auctor, quis porttitor lectus sollicitudin. Proin malesuada est tempor nulla pulvinar, in rutrum odio dictum. Ut sit amet sagittis sapien. Nullam egestas euismod quam, eu dictum eros placerat a. Sed tristique, sem nec scelerisque venenatis, erat ante condimentum ipsum, sed porttitor nibh felis non nulla. Donec vehicula accumsan est, eget semper ligula bibendum in. Nulla facilisi. Donec auctor purus sed scelerisque hendrerit. Donec quis libero id ipsum ultrices convallis.

Phasellus suscipit bibendum auctor. Nullam tristique felis et lacus pellentesque, in finibus lectus feugiat. Nullam quis laoreet justo, sed rhoncus tortor. Maecenas magna nulla, rhoncus sed ultrices at, imperdiet et felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla feugiat tortor et orci volutpat dignissim. Maecenas ut imperdiet magna. Praesent tristique tortor a nulla malesuada, non fermentum libero condimentum.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu eleifend dolor. Aliquam ultricies, erat sit amet maximus sagittis, justo velit sagittis purus, nec luctus risus mauris ac mauris. Maecenas dignissim tincidunt lectus, quis placerat tortor vestibulum nec. Aliquam feugiat diam sed justo rhoncus aliquam. Phasellus posuere tincidunt venenatis. Ut tristique velit turpis, eu euismod magna malesuada in. Duis vitae nunc aliquam, sodales lorem sit amet, iaculis metus. Proin tristique elit sed ornare pharetra. Fusce venenatis nunc ut mi tincidunt ullamcorper eu et enim. Nulla facilisi. Fusce eu consequat nunc. Sed aliquam fringilla convallis.</div>
</div>

Answer 1

CSS float 可以给你你想要的，我个人认为 bootstrap 网格布局不是为你的目的而设计的。

1. HTML:将小 div 放在大 div 之前。
2. CSS:

.col-md-3 {
float :对；
}