Bootstrap 内容与固定宽度的侧边栏一起布局不正确答案

【问题标题】：Bootstrap content doesn't lay out correctly in conjunction with fixed width sidebarsBootstrap 内容与固定宽度的侧边栏一起布局不正确
【发布时间】：2016-01-22 03:07:40
【问题描述】：

第一行列和第二行之间有很大的空白。

JSFiddle：https://jsfiddle.net/5o3ug26g/

<!DOCTYPE html>
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .content {
            margin-left: 170px;
            margin-right: 170px;
        }

        .sidebar { width: 160px; height: 600px; }
        .left { float: left; background: forestgreen; }
        .right { float: right; background: steelblue; }
    </style>
</head>


<body>
    <div>
        <div class="left sidebar"></div>

        <div class="right sidebar"></div>

        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">Text on top of the page</div>
                    <div class="col-md-6">Other text on top of the page</div>
                </div>

                <div class="row">
                    <div class="col-md-6">I want this to be right below the "Text on top of the page" but it isn't...</div>
                    <div class="col-md-6">... and I want this to be right below the "Other text on top of the page" but it isn't</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

如果我删除row 类，那么差距就会消失，但是当使用Bootstrap navbar-s 和其他带有:after { display: table; } 的容器时也会出现这个问题，所以仅仅删除row 类不是解决方案。

我尝试在很多地方添加clearfix，但无济于事。

这是从更复杂的响应式布局中提取的，我宁愿避免全部重构。

什么是最简单的解决方法？

【问题讨论】：

标签： html css twitter-bootstrap clearfix

【解决方案1】：

您可以绝对定位左右侧边栏，而不是浮动它们。浮动干扰了引导布局。

.left { background: forestgreen; position:absolute; left:0; top:0; }
.right { background: steelblue; position:absolute; right:0; top:0;}

从您的分支中提取的实时示例：https://jsfiddle.net/5fk5900s/1/

【讨论】：

谢谢。如果我在顶部有一个可变高度的导航栏怎么办？
@Warplanes.Today 您可以将侧边栏和内容包装在 div 中，并将其位置设置为相对。只需确保导航栏在此 div 之外。

【解决方案2】：

马塞洛是正确的。您已经为内容添加了边距以说明侧边栏。这是绝对定位变化的小提琴：

https://jsfiddle.net/5o3ug26g/1/

.content {
    margin-left: 170px;
    margin-right: 170px;
}

.sidebar { 
    position: absolute;
    width: 160px; 
    height: 600px; 
}
.left { 
    left: 0px; 
    background: 
    forestgreen; 
}
.right { 
    right: 0px; 
    background: steelblue; 
}

【讨论】：

Marcelo 的编辑比我展示了 css 实现。