如何在引導中將我的內容在3列上均勻對齊？

Question

正如您在下面的圖片中看到的，我的內容不是均勻排列的。有沒有辦法在Bootstrap中均勻對齊我的內容？例如，我希望我的圖像全部在每列上對齊。我不介意段落和圖像之間是否有空白區域。

Answer 1

使用一個單獨的.row DIV當前.row下面的圖片，並把同一種用相同的類列/分隔在那裏，你目前有文字和圖像。

Answer 2

使用框架的.thumbnail組件（帶.caption）可以完成@Johannes建議如下圖所示，包括加入自己的高度與.caption像下面。確保您根據需要調整高度。

.caption{ 
 
    min-height: 300px; 
 
    height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <div class="thumbnail"> 
 
     <div class="caption"> 
 
     <h3>Thumbnail label</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo sapien vitae turpis pellentesque tempus. Nunc vehicula cursus ultricies. Sed aliquam hendrerit sapien quis blandit. Nam tempus condimentum nunc ac.</p> 
 
     </div> 
 
     <img src="http://lorempixel.com/300/300" alt="placeholder image"> 
 
    </div> 
 
    </div> 
 
    <!-- 2 --> 
 
    <div class="col-xs-4"> 
 
    <div class="thumbnail"> 
 
     <div class="caption"> 
 
     <h3>Thumbnail label</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget tincidunt justo. Morbi ligula felis, accumsan eu auctor a, vulputate vel justo. Integer sapien nulla, rutrum at metus quis, rutrum porta risus. Vestibulum pulvinar metus nec luctus 
 
      euismod. Vivamus faucibus libero non magna vulputate laoreet.</p> 
 
     </div> 
 
     <img src="http://lorempixel.com/300/300" alt="placeholder image"> 
 
    </div> 
 
    </div> 
 
    <!-- 3 --> 
 
<div class="col-xs-4"> 
 
    <div class="thumbnail"> 
 
     <div class="caption"> 
 
     <h3>Thumbnail label</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec dui tellus. In imperdiet erat eros, sit amet scelerisque ante efficitur bibendum. Quisque tempor diam.</p> 
 
     </div> 
 
     <img src="http://lorempixel.com/300/300" alt="placeholder image"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

好吧，這是我碰到的早期與基於浮動的網格系統工作時的一個問題。

這裏有一個如何在引導與您當前的電網系統解決問題的草圖：http://jsbin.com/yolewusuza/

@media screen and (min-width: 992px) { 
 
    .content { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 15px; 
 
    right: 15px; 
 
    bottom: 0; 
 
    } 
 
    .col-sm-4:after { 
 
    padding-bottom: 170%; 
 
    content: ''; 
 
    display: block; 
 
    } 
 
    .content .image { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4"> 
 
     <div class="content"> 
 
     <h3>Heading</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Videsne quam sit magna dissensio? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Quamvis enim depravatae non sint, pravae tamen esse possunt. Negat enim summo bono afferre 
 
      incrementum diem. Laboro autem non sine causa; Minime vero istorum quidem, inquit. Duo Reges: constructio interrete.</p> 
 
     <div class="image"> 
 
      <img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&amp;h=150"> 
 
      <p>Image description text</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4"> 
 
     <div class="content"> 
 
     <h3>Heading</h3> 
 
     <p>Animi enim quoque dolores percipiet omnibus partibus maiores quam corporis. Non quaeritur autem quid naturae tuae consentaneum sit, sed quid disciplinae. Ut in geometria, prima si dederis, danda sunt omnia. Potius inflammat, ut coercendi magis 
 
      quam dedocendi esse videantur. Ut proverbia non nulla veriora sint quam vestra dogmata. Omnes enim iucundum motum, quo sensus hilaretur. At quicum ioca seria, ut dicitur, quicum arcana, quicum occulta omnia?</p> 
 
     <div class="image"> 
 
      <img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&amp;h=150"> 
 
      <p>Image description text</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="col-sm-4"> 
 
     <div class="content"> 
 
     <h3>Heading</h3> 
 
     <p>Quae est igitur causa istarum angustiarum? Vestri haec verecundius, illi fortasse constantius. Ego vero volo in virtute vim esse quam maximam; Quem Tiberina descensio festo illo die tanto gaudio affecit, quanto L. An dubium est, quin virtus ita 
 
      maximam partem optineat in rebus humanis, ut reliquas obruat? Negat esse eam, inquit, propter se expetendam. O magnam vim ingenii causamque iustam, cur nova existeret disciplina! Perge porro.</p> 
 
     <p>In qua quid est boni praeter summam voluptatem, et eam sempiternam? Si qua in iis corrigere voluit, deteriora fecit. Perge porro; Quippe: habes enim a rhetoribus; Quis est, qui non oderit libidinosam, protervam adolescentiam? Expectoque quid ad 
 
      id, quod quaerebam, respondeas. 
 
     </p> 
 
     <div class="image"> 
 
      <img style="width:100%;" src="https://placeholdit.imgix.net/~text?w=350&amp;h=150"> 
 
      <p>Image description text</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

調整列的新創建的僞元素的填充，底部滿足您的需求。理想情況下，您需要限制摘錄長度。