Disposizione casella di testo in una riga

Question

Sto cercando di organizzare caselle di testo in una riga usando BootstreAp3, Il problema è che le caselle di testo sono sovrapposte che voglio rimuovere la sovrapposizione e si desidera visualizzare i dati in una riga.Demo del seguente codice è http://jsfiddle.net/xrcwrn/h5a33/

Il mio codice è

<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

Il motivo principale per questo è non hai dato i tuoi ingressi La classe di controllo .form. Ci sono anche alcuni errori nel tuo markup con citazioni extra erranti che dovresti correggere, ma non è la causa per i problemi di sovrapposizione.

Inoltre, non è necessario avere COL-XS-1, COL-SM-1, COL-LG-1. Usare la classe XS da solo sarà sufficiente. Pensa alle classi di colonne come additivo. L'aggiunta di COL-XS-1 è una sorta di dire che dice: "Rendi questa colonna 1/12 in ogni breakpoint da questo punto in avanti finché non ti dico diversamente."

Come hai 6 elementi, ho effettivamente creato ogni 2 unità di griglia ciascuna di seguito. Ciò aiuterà un po 'con la parola avvolgerta nelle tue etichette ai dispositivi di larghezza più piccoli.

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>

.

Modifica - Better Spiegazione per COL Classi:

Le classi di colonne consentono di specificare il numero di unità di griglia che una colonna dovrebbe occupare. Per impostazione predefinita, ogni riga può contenere 12 unità di griglia prima che si avvolgano alla riga successiva.

La porzione XS, SM, MD e LG della classe COL corrisponde a uno specifico punto di interruzione.

Bootstrap 3 è il cellulare prima, quindi se si specifica una classe COL sulla dimensione XS, è solo necessario specificare un'altra classe COL se si desidera un comportamento diverso su uno schermo più ampio.

Ad esempio, se si desidera 6 unità di griglia (che sono 2 colonne o 50%) per tutte le schermate ma si desidera 3 unità di griglia (che sono 4 colonne o 25%) su schermate LG (1200px +), si scrive: class="col-xs-6 col-lg-3". Il risultato è che su tutti i dispositivi che sono inferiori a 1200px, avrai 2 colonne e qualsiasi cosa over 1200px sarà 4 colonne.