Question

我有三个div，＆＃34; First＆＃34;，＆＃34; Second＆＃34;和＆＃34;第三＆＃34;。他们是兄弟姐妹（拥有相同的父母），因为在移动设备上，他们应该按照这个确切的顺序显示在彼此之下。

在较大的设备上，我希望First和Third位于左侧，Second位于右侧。下面的代码说明了这一点，您还可以看到它如何查看http://www.bootply.com/mh9VFWxvp2。

我的问题是第一和第三div之间的垂直空间。第三个div垂直与第二个div的底部对齐。我希望Third在垂直的First下开始，而不会在那里留下一块空的空间。怎么做到这一点？

<div class="container-fluid">

 <div class="col-md-7" id="first">
  <h1>First</h1>                                
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu.
  </p>
 </div>

 <div class="col-md-5" id="second">
   <h1>Second</h1>
   <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.</p>       
   <p>Aliquid placerat sit ad, eu mollis ornatus deterruisset eum. Consequat dissentiet definitiones at his. Et nostrum quaerendum omittantur pri. Per te verear admodum. Sed alia aliquid expetendis ea. Per et prima nostrud, et possim iuvaret suavitate vel, at pro brute primis. At eam suas democritum, te meis legere nam.</p>
 </div>

 <div class="col-md-7" id="third">
  <h1>Third</h1>
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.</p>      
 </div>
</div>

更新：原始问题中缺少这个，但是如果可能的话，我试图在不隐藏（和重复代码）的情况下实现结果。

Answer 1

在第二个div上使用pull-right类。这将使其与其他列的右侧对齐。

<div class="container-fluid">
<div class="col-md-7" id="first">
  <h1>First</h1>                                
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu.
  </p>
</div>

  <div class="col-md-5 pull-right" id="second">
  <h1>Second</h1>
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.
  </p>
  <p>
    Aliquid placerat sit ad, eu mollis ornatus deterruisset eum. Consequat dissentiet definitiones at his. Et nostrum quaerendum omittantur pri. Per te verear admodum. Sed alia aliquid expetendis ea. Per et prima nostrud, et possim iuvaret suavitate vel, at pro brute primis. At eam suas democritum, te meis legere nam.
  </p>
</div>

<div class="col-md-7" id="third">
  <h1>Third</h1>
  <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.
  </p>
</div>
</div>

已更新：http://bootply.com/YJ1KxGIcBx

Answer 2

这很好用。但我不知道这种方式是否正确。

但它会为你的问题提供解决方案。除Div部分在屏幕上占据100％宽度

#first, #third
{
  height:auto;
  float:left;
}
#second{
  float:right;
}

Answer 3

现在你的两个问题已经在这个例子中得到了解决。移动以及大屏幕的问题。我做了两个不同的div，首先是大屏幕，它将隐藏在移动设备中并使用hidden-sm类，第二个div仅在移动设备中显示。你可以检查一下。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid hidden-sm">
<div class="col-md-7">
	<div class="col-md-7" class="first">
  	<h1>First</h1>                                
  	<p>Lorem ipsum dolor sit amet, propriae accusata sea cu.
  	</p>
 	</div>
 	<div class="col-md-7" class="third">
  	<h1>Third</h1>
  	<p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.</p>      
 	</div>
</div>
<div class="col-md-5" class="second">
   <h1>Second</h1>
   <p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.</p>       
   <p>Aliquid placerat sit ad, eu mollis ornatus deterruisset eum. Consequat dissentiet definitiones at his. Et nostrum quaerendum omittantur pri. Per te verear admodum. Sed alia aliquid expetendis ea. Per et prima nostrud, et possim iuvaret suavitate vel, at pro brute primis. At eam suas democritum, te meis legere nam.</p>
 </div>
</div>
<div class="container-fluid visible-sm" >
	<div class="col-sm-12" class="first">
  		<h1>First</h1>                                
  		<p>Lorem ipsum dolor sit amet, propriae accusata sea cu.
  		</p>
 		</div>
 	<div class="col-sm-12" class="second">
   		<h1>Second</h1>
   		<p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.</p>       
   		<p>Aliquid placerat sit ad, eu mollis ornatus deterruisset eum. Consequat dissentiet definitiones at his. Et nostrum quaerendum omittantur pri. Per te verear admodum. Sed alia aliquid expetendis ea. Per et prima nostrud, et possim iuvaret suavitate vel, at pro brute primis. At eam suas democritum, te meis legere nam.</p>
 	</div>
 	<div class="col-sm-12" class="third">
  	<h1>Third</h1>
  	<p>Lorem ipsum dolor sit amet, propriae accusata sea cu. Ex congue probatus pericula ius, ei cum placerat persequeris. Nec sumo petentium forensibus ei. Noster impedit has ex. Ius te scripta volumus mentitum, lucilius recusabo argumentum eos id. Errem equidem constituto ei eam.</p>      
 	</div>
 </div>

＆＃13;

Answer 4

您可以使用媒体查询为较大的设备添加特定样式

CSS

@media (min-width: 992px) {
 #second {position: absolute; right: 0;}
}

Fiddle

Bootstrap三个兄弟列，第二列对齐右侧

4 个答案: