-1

我真的对这个引导网格问题感到困惑。从下面的截图(来源:http ://uforest.org/Species/C/Callerya_atropurpurea.php )。标题“参考”在 md 和 sm 的大小处超出了网格对齐。

在此处输入图像描述

从下面的代码可以看出,References 的网格布局和下面的引文都在 col-lg-12 下。这嵌套在 col-md-9 的列中。“参考”已改为跳到另一个 col-md-3 列。

<!-- References -->
<div class="col-lg-12">
    <h4>References</h4>
        LaFrankie JV, SJ Davies, LK Wang, SK Lee & SKY Lum. (2005) Forest Trees of Bukit Timah: Population Ecology in a Tropical Forest Fragment. Simply Green, Singapore. 178 pp.......           
        <br><br><br>
        <span style="float:right;"><small>Posted Date: 2012-11-27 / Modified Date: 2015-01-11</small></span>
 </div>

有谁知道为什么?这种布局适用于我所有的其他 200 页,并且只有 2 个这样的实例。

谢谢!

[已解决] 感谢@Prince sodhi 建议添加类 clearfix。我将它添加到包含照片的 div 标签之一,它解决了这个问题。

<!-- Photos -->
<div class="clearfix">
    <div class="col-sm-6 img-portfolio">
        <img class="img-responsive img-rounded" src="../../images/callerya_atropurpurea1.jpg" alt="">
        <p><small>The leaflets are droopy, glossy, and bend upwards at the mid-ribs.</small></p>
    </div>

    <div class="col-sm-6 img-portfolio">
        <img class="img-responsive img-rounded" src="../../images/callerya_atropurpurea2.jpg" alt="">
        <p><small>The Purple Milletia always have a dense crown of canopy.</small></p>
        </div>

    <div class="col-sm-6 img-portfolio">
        <img class="img-responsive img-rounded" src="../../images/callerya_atropurpurea3.jpg" alt="">
        <p><small>The purple flowers, and developing fruits at the base.</small></p>
    </div>
</div>
4

2 回答 2

1

只需添加类clearfix喜欢h4

<h4 class="clearfix">References</h4>

测试和工作。

玩得开心。

于 2017-06-19T13:44:19.360 回答
0

你应该把它们排成一行。这将创造你正在寻找的休息。所以,...类似于https://www.bootply.com/fBHELKjoGD

于 2017-06-19T13:46:59.410 回答