gpt4 book ai didi

css - 如何防止一个 div 影响另一个 Bootstrap 表单元素的垂直位置?

转载 作者:太空宇宙 更新时间:2023-11-04 14:58:15 25 4
gpt4 key购买 nike

我为使用 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/

解决此问题的合适方法是什么?最初我只是将左侧列设置为绝对定位,因为它总是齐平在左上角。但是,当我向页面添加页脚时,它开始将两者重叠,这是 Not Acceptable 。

是否有 Bootstrap 方法来解决这个问题,或者是否有我应该添加/覆盖自己的属性以解决问题?

最佳答案

您忘记为详细信息列添加左浮动。我在 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;
}

关于css - 如何防止一个 div 影响另一个 Bootstrap 表单元素的垂直位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16763976/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com