1行のテキストボックスの配置

Question

BootStrap3を使用して1列にテキストボックスを配置しようとしています。 問題が表示されているテキストボックスは重複していて、データを1行に表示したいです。以下のコードのデモは 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を追加するのは、「このポイントからこの点からこの列1/12をこの列にする」と言って、「この点から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>

.

edit - Colクラスの詳細：

列クラスを使用すると、列が占有する必要があるグリッド単位の数を指定できます。デフォルトでは、各行は次の行に折り返される前に12グリッド単位を保持できます。

COLクラスのXS、SM、MD、およびLG部分は特定のブレークポイントに対応しています。

ブートストラップ3は最初にモバイルであるので、XSサイズでCOLクラスを指定した場合は、より広い画面で異なる動作を希望する場合にのみ別のコロクラスを指定するだけです。

たとえば、すべての画面で6グリッド単位（2列または50％）が必要な場合がありますが、LG画面（1200px +）で3つのグリッド単位（4列または25％）が必要な場合は、次のように書きます。 class="col-xs-6 col-lg-3"。その結果、1200ピクセル未満のすべてのデバイスでは、2列が2列になり、1200ピクスを超えるものが4列になります。