我有一个自定义的，两列布局的页面将在一个网站上使用Bootstrap。我自己完成了列的css，因为Bootstrap似乎没有处理"一个固定，一个流动"的布局。这很好地工作，除了当我试图将表单放在较大的流体列中:
<style>
#filterColumn {
border: 1px solid #ececec;
float: left;
margin: 0 20px 40px 20px;
padding: 62px 10px 10px 10px;
width: 216px;
}
#detailsColumn {
border: 1px solid #ececec;
margin: 0px 20px 40px 275px;
padding: 72px 10px 10px 10px;
}
</style>
<body>
<div id="filterColumn">
<h4>Headline</h4>
<p>
Some text in here.
</p>
</div>
<div id="detailsColumn">
<h2>Here are my busted fields:</h2>
<form id="detailForm" class="form-horizontal" action="/action" method="post">
<div class="control-group">
<label for="input0" class="control-label">Input 0</label>
<div class="controls">
<input id="input0" name="input1" type="text" />
</div>
</div>
<div class="control-group">
<label for="input1" class="control-label">Input 1</label>
<div class="controls">
<input id="input1" name="input1" type="text" />
</div>
</div>
</div>
</body>
Bootstrap样式的表单元素，并包括一些清除的东西，使其全部工作。对我来说，问题是我在左边的固定div会影响右边流动div中元素的清除。基本上，表单的第一行定位正确，但所有后续行都被推到左侧div的内容下方，尽管它们不在其中。结果是，我在输入列表中有一个大而丑陋的缺口。我创建了一个jsFiddle这样你就能清楚地看到我在说什么了:
http://jsfiddle.net/ABJ53/解决这个问题的合适方法是什么?最初我只是将左列设置为绝对定位，因为它总是与左上对齐。然而，当我在页面中添加页脚时，它开始重叠，这是不可接受的。
是否有一个Bootstrap的方法来解决这个问题，或者有属性，我应该添加/覆盖自己，以解决问题?
你忘了添加float left for details列。我在你的例子中为两个id添加了float left，它起作用了。
#filterColumn
{
background-color: #fefefe;
border: 1px solid #ececec;
border-radius: 8px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
float: left;
width: 216px;
}
#detailsColumn {
background-color: #fefefe;
border: 1px solid #ececec;
border-radius: 8px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
float: left;
width: 556px;
}