如何使用 Bootstrap clearfix 清除浮动？答案

【问题标题】：How can use Bootstrap clearfix for clearing floats?如何使用 Bootstrap clearfix 清除浮动？
【发布时间】：2015-01-03 11:09:31
【问题描述】：

我的single.php 页面中有一个 WordPress 主题。下面是 HTML 代码：

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

        <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
            <div id="single-post">
                single post content
            </div>
        </div>

        <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
            <div id="sidebar-area">
                sidebar area
            </div>
        </div>

    </div>
</div>

CSS 代码：

#single-post,
#sidebar-area {
    margin:10px auto;
    background: #fff;
    border: 1px solid #d7d7d7;
    padding: 15px;
}

图片展示

当我的单个帖子内容高度小于侧边栏区域时，一些侧边栏小部件会转到单个内容区域下方。如果使用 Bootstrap clearfix 类，如果侧边栏高于单个内容，如何在侧边栏区域内显示所有侧边栏小部件？

【问题讨论】：

使用引导网格制作 8 个（左侧的任何内容）和 4 个（您的侧边栏）的 collums div，您放入 4 col div 的所有内容都将在这里，无论您的时间有多长侧边栏。也许我只是不明白你的问题 - 对不起 - 但你为什么要使用 clearfix？
应该对你有帮助的简单例子——如果我理解你bootply.com/teLpSeImf6

标签： twitter-bootstrap clearfix

【解决方案1】：

感谢您回复我，但我的问题已解决我在我的侧边栏小部件中使用了下面的这个网格，因为它与每个小部件重复，我删除了代码并粘贴在 sidebar.php 文件中，我的问题解决了，所有小部件都显示在侧边栏区域

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
</div>

【讨论】：