Question

我正在尝试使用bootstreap3在一行中排列文本框，问题是文本框重叠我想删除重叠并希望在一行中显示数据。以下代码的演示为http://jsfiddle.net/xrcwrn/h5A33/

我的代码是

<form  id="addExpense" action="AddedExpense" method="post">
                        <div class="expenseDetails" >
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <div class="panel-info"><h4>Add Your Expenses <a href="#" id="add"><span class="glyphicon-plus" data-toggle="tooltip" data-placement="bottom" title="Click to add new expense"></span></a></h4></div>
                                </div>
                                <div class="panel-body">
                                    <div class="row" id="0">
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
     <label>Expensed Type</label>
      <input  type="text"/>
  </div>
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
 <label>Amount</label>
  <input  type="text" name="expenseList[0].value" "/>
  </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1">
  <label>Date</label>
   <input  type="text" name="expenseList[0].dt" " cssClass="dt"/>
  </div>
  <div class="form-group col-xs-1 col-sm-1 col-lg-1">
   <label>Desc</label>
   <input  type="text" name="expenseList[0].description"/>
  </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1">
     <label>Receipt</label>
      <input  type="text" name="expenseList[0].img" />
 </div>
 <div class="form-group col-xs-1 col-sm-1 col-lg-1 cl">
    <label >Delete</label>
    <img src="images/delete.png" class="delete"/>
 </div>
   </div>
  </div>
 </div>
                            <div class="col-xs-4 right">
                                <button type="submit" class="btn btn-success">Save</button>
                            </div>
                        </div>
                    </form>

Answer 1

主要原因是你没有给你的输入.form-control类。您的标记中也存在一些错误，您应该修复错误的额外引号，但这不是导致重叠问题的原因。

此外，没有必要使用col-xs-1，col-sm-1，col-lg-1。单独使用xs类就足够了。将列类视为可添加的。添加col-xs-1有点像说，“从这一点开始，在每个断点处将此列放到第12位，直到我告诉你。”

由于你有6个元素，我实际上每个下面都有2个网格单元。这将有助于在最小宽度设备的标签中包装。

<强> HTML：

<form id="addExpense" action="AddedExpense" method="post">
    <div class="expenseDetails">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div class="panel-info">
                     <h4>Add Your Expenses <a href="#" id="add"><span class="glyphicon-plus" data-toggle="tooltip" data-placement="bottom" title="Click to add new expense"></span></a></h4>

                </div>
            </div>
            <div class="panel-body">
                <div class="container">
                    <div class="row" id="0">
                        <div class="form-group col-xs-2">
                            <label>Expensed Type</label>
                            <input type="text" class="form-control" />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Amount</label>
                            <input type="text" class="form-control" name="expenseList[0].value" />
                        </div>
                        <div class="form-group col-xs-2 ">
                            <label>Date</label>
                            <input type="text " class="form-control" name="expenseList[0].dt " cssClass="dt " />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Desc</label>
                            <input type="text " class="form-control" name="expenseList[0].description " />
                        </div>
                        <div class="form-group col-xs-2">
                            <label>Receipt</label>
                            <input type="text " class="form-control" name="expenseList[0].img " />
                        </div>
                        <div class="form-group col-xs-2 cl ">
                            <label>Delete</label>
                            <img src="images/delete.png " class="delete " />
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 right">
                    <button type="submit" class="btn btn-success">Save</button>
                </div>
            </div>
        </div>
    </div>
</form>

编辑 - 更好地解释col类：

列类允许您指定列应占用的网格单元数。默认情况下，每行可以包含12个网格单位，然后它将换行到下一行。

col类的xs，sm，md和lg部分对应于特定断点。

Bootstrap 3首先是移动的，因此如果您指定xs大小的col类，如果您想在更宽的屏幕上使用不同的行为，则只需要指定另一个col类。

例如，如果您想要所有屏幕的6个网格单位（2列或50％）但是您想要在lg屏幕（1200px +）上使用3个网格单位（4列或25％），您可以写： class="col-xs-6 col-lg-3"。结果是，在所有小于1200px的设备上，您将拥有2列，超过1200px的任何设备将是4列。

文本框排列在一行

1 个答案: