当屏幕宽度开始缩小时,我遇到了输入框相互重叠的问题。有没有办法在 bootstrap 2 文件中或直接调整内联 css 来解决这个问题?
这是包含内容的主页。
<div class="content-center">
<div class="container">
<div class="row-fluid">
<div class="span9">
<div class="content-area">
//WHERE CONTENT IS LIVING
</div>
</div>
<div class="span3">
<div class="sidebar">
<div class="content-area">
</div>
</div>
</div>
</div>
</div>
</div>
这是内容所在的实际代码。
<div class="well">
<div class="row-fluid">
<div class="span4">
<h4>Dinner Banquet w Cocktail Reception Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span><INPUT NAME="xbrunchdinneronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getbrunchdinnertotal(this);" value="0" >
</div>
</div>
<div class="span4">
<h4>Wine Tour:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:18px;">Qty</span>
<input type="text" name="xwinetouronly" onKeyUp="javascript:getwinetouronlytotal(this);" placeholder="Enter Quantity">
</div>
<h4>Total:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xwinetouronlytotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getwinetouronlytotal(this);" value="0"></div>
</div>
<div class="span4">
<h4>Exhibit Fee:</h4>
<div class="input-prepend">
<span class="add-on" style="font-size:24px;">$</span>
<INPUT NAME="xhibittotal" TYPE="text" style="font-weight:bold; font-size:18px; color:#2e713b; background-color:#ffffff;" onKeyUp="javascript:getgolftotal(this);" value="0" >
</div>
</div>
</div>
</div>
浏览器宽度为 1199px
那么有什么办法可以解决这个问题。我知道我可以在我自己的自定义 css 中弄乱媒体查询,但我也想知道我是否可以在 bootstrap 2 源文件中修复它。或者直接用内联 CSS 解决这个问题
最佳答案
将所有输入放入列中
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Dinner Banuqet
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Wine Tour
//input field
</div>
<div col-lg-4 col-lg-4 col-sm-12 col-sm-12>
Exhibit Fee
//input field
</div>
在大屏幕和中屏幕上,将有 3 列内容占据整个屏幕。在小屏幕和超小屏幕上,内容将垂直对齐。您可以将 cols 直接添加到您的输入附加类中
关于html - 如何修复 Bootstrap 2 中的重叠输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46015726/