如何防止一个 div 影响另一个引导表单元素的垂直位置？答案

【问题标题】：How do I keep one div from affecting the vertical position of another's bootstrap form elements?如何防止一个 div 影响另一个引导表单元素的垂直位置？
【发布时间】：2013-05-27 06:26:27
【问题描述】：

我有一个自定义的两列布局，用于在使用 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 方法来解决此问题，或者是否有我应该添加/覆盖自己以解决问题的属性？

【问题讨论】：

你为什么不使用引导网格？
除非我弄错了，否则对于网格，您必须将整行提交为完全流动或完全固定，这不适用于我正在做的事情。我正在尝试一个固定的左列和一个流动的右列。如果我可以使用现有的网格系统，当然，请纠正我。

标签： css twitter-bootstrap

【解决方案1】：

您忘记在左侧添加浮动以获取详细信息。我在your example here 上的两个 ID 中都添加了左侧浮动，它可以正常工作。

#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;
}

【讨论】：