html - 当左侧元素具有 float 属性时如何设置 padding Bootstrap？

Question

我有以下 HTML 代码:

<div class="col-md-3 block">
<div class="col-md-4 photo">
<a target="_blank" href="https://www.facebook.com/app_scoped_user_id/1282701351808739/"><img src=""></a></div>
<div class="col-md-8"><h4><span style="font-weight: bold;">Gracie Huff</span></h4><p class="review-comment" style="line-height: 1.6;"><span>Oh my goodness! Your work is so precious and beautiful!!! I love what you do and I hope you continue to keep up the fabulous work!!! ❤❤</span></p>

问题是 block col-md-4 有属性 float:left。 如果 block .col-md-8 中的文本太长，它会出现在 block col-md-4 photo 下。

样本 here

那么，如何解决这个问题？

作为解决方案，我可以为元素设置固定高度:div.photo

Answer 1

当使用 bootstrap 列时，一行内总共有 12 个空间。

请查看网格文档。 http://getbootstrap.com/css/#grid

所以在你的例子中 3 + 4 + 8 = 15 。所以这 3 个太多了。在我下面的代码示例中，我将页面分成 3 个偶数列。所以你做 12/3 = 4 所以你给每个类(class) col-md-4 。如果您甚至不想要列，您可以在最后使用数字。但永远不要超过 12 个，否则它们将排不下。

基本结构还包括一个容器和一行。 如果您希望容器是全宽的，您可以将 container-fluid 而不是 container 添加到顶级 div。

<div class="container-fluid">
  <div class="row">

    <div class="col-md-4">
      <a target="_blank" href="https://www.facebook.com/app_scoped_user_id/739844199505120/"><img src="https://fb-s-b-a.akamaihd.net/h-ak-xpf1/v/t1.0-1/p50x50/14724409_686756244813916_4119560930105375585_n.jpg?oh=0d295e97d3818a2ba788015d38385376&amp;oe=590D81DC&amp;__gda__=1494163569_54508491e4fd3d1197960c466dfee235"></a>
    </div>

    <div class="col-md-4">
      <h4 class="strong"><strong>Anastasia Michelle Archuleta</strong></h4>
    </div>

    <div class="col-md-4">
      <p class="review-comment" style="line-height: 1.6;">
       <span>I can't stop looking at these cute creatures!  I'm so in love with all of them! I'm saving up for one, what one is going to be a very hard decision that's for sure!</span>
      </p>
    </div>

  </div>

</div>