Question

如下图所示，我的内容未均匀对齐。有没有办法在Bootstrap中均匀地对齐我的内容？例如，我希望我的图像都能在每列之间对齐。如果段落和图像之间有一些空白，我不介意。

Image displaying the issue

Answer 1

为当前.row下方的图片使用单独的.row div，并将相同类型的列/ div放在当前具有相同类别的文本和< / em>图片。

Answer 2

好的，这是我在使用基于浮动的网格系统时遇到的一个问题。

这里有一个草图，说明如何使用Bootstrap中的当前网格系统解决问题：http://jsbin.com/yolewusuza/

＆＃13;

@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;
  }
}

＆＃13;

<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>

＆＃13;

调整列中新填充的伪元素的填充底部以满足您的需要。理想情况下，您需要限制摘录长度。

Answer 3

使用框架的.thumbnail组件（.caption），您可以像下面一样完成@Johannes建议，包括将自己的高度添加到.caption，如下所示。确保根据需要调整高度。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何在bootstrap中将我的内容均匀地对齐3列？

3 个答案: