如何修复 Bootstrap 2 中的重叠输入答案

【问题标题】：How to fix overlapping inputs in Bootstrap 2如何修复 Bootstrap 2 中的重叠输入
【发布时间】：2018-02-11 10:23:30
【问题描述】：

我遇到了输入框相互重叠的问题，因为屏幕开始缩小宽度。有没有办法在 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>

这是 1199 像素的浏览器宽度

这是 979px 的浏览器宽度

那么有什么办法可以解决这个问题。我知道我可以在我自己的自定义 css 中弄乱媒体查询，但我也想知道我是否可以在 bootstrap 2 源文件中解决这个问题。或者直接使用内联 CSS 修复这个问题

【问题讨论】：

标签： html css twitter-bootstrap media-queries twitter-bootstrap-2

【解决方案1】：

将所有输入放入列中

<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 直接添加到您的 input-append 类中

【讨论】：

这不是 bootstrap 3 的吗？