css - Bootstrap CSS - 嵌套列不清除/放置在 block 外

Question

我有一个使用 bootstrap CSS 网格的嵌套列。

此列位于我的主要区域之外，因为它向右浮动，因此容器不会扩展以容纳它。以下示例中的所有文本都应位于背景为灰色的 .property-item 中。

JSFiddle https://jsfiddle.net/5jqsoacs/

我调查了 documentation其中指出有一些类(class)可以提供帮助，但我无法让他们工作。我尝试了以下方法:

<div class="col-xs-6 no-gutter full-buffer clearfix"><p>£98 pp/pw</p></div>
<div class="col-xs-6 no-gutter full-buffer text-right clearfix"><p><span class="bedroom icon">4></span></p></div>

将 clearfix 添加到列中，但没有任何变化，我的两列仍然位于它们的包装器之外。

有什么建议吗？

Answer 1

您似乎忘记了 .row 类。您需要将恰好“12”列放入一行中。 看到这里你就明白了:

https://jsfiddle.net/5jqsoacs/6/

<div class="property-item">
    <div class="row">
        <div class="col-xs-12">
            <div class="image"></div>
            <div class="text">
                <h3>12 Fairholme Road</h3>
                <h4>Woolacombe</h4>
            </div>
        </div>
    </div><!-- .row -->
    <div class="row">
        <div class="col-xs-6 no-gutter full-buffer clearfix">
            <p>£98 pp/pw</p>
        </div>
        <div class="col-xs-6 no-gutter full-buffer text-right clearfix">
            <p><span class="bedroom icon">4</span>
            </p>
        </div>
    </div><!-- .row -->
</div> <!-- .property-item -->