Bootstrap CSS - 嵌套列不清除放置在块外的部分。

Question

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

这一列由于是右浮动的，所以位于我的主区域之外，所以容器没有展开来容纳它。在下面的例子中，所有的文字都应该在里面。.property-item 它有一个灰色的背景。

JSFiddle https:/jsfiddle.net5jqsoacs

我查过了 文件 它说有一些类的帮助，但我不能让他们工作。我试过以下方法。

<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.net5jqsoacs6。

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

Answer 2

请试试这段代码，它的工作原理很好，希望能解决你的问题。

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