Disposition des zones de texte sur une seule ligne

Question

J’essaie d’organiser les zones de texte sur une ligne à l’aide de bootstreap3, Le problème est que les zones de texte se chevauchent, je veux supprimer les chevauchements et je veux afficher les données sur une seule ligne.La démo du code ci-dessous est http://jsfiddle.net/xrcwrn/h5A33/

Mon code est

<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

La raison principale en est que vous n'avez pas attribué à vos entrées la classe .form-control.Il y a également quelques erreurs dans votre balisage avec des guillemets supplémentaires errants que vous devez corriger, mais ce n'est pas la cause des problèmes de chevauchement.

De plus, il n'est pas nécessaire d'avoir col-xs-1, col-sm-1, col-lg-1.Utiliser la classe xs seule suffira.Considérez les classes de colonnes comme étant additives.Ajouter col-xs-1, c'est un peu comme dire : "faites cette colonne 1/12ème à chaque point d'arrêt à partir de ce point jusqu'à ce que je vous dise le contraire."

Comme vous avez 6 éléments, j'ai en fait créé chacun 2 unités de grille ci-dessous.Cela vous aidera un peu avec le retour à la ligne des mots dans vos étiquettes sur les appareils les plus petits.

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 - Meilleure explication pour les classes col :

Les classes de colonnes vous permettent de spécifier le nombre d'unités de grille qu'une colonne doit occuper.Par défaut, chaque ligne peut contenir 12 unités de grille avant de passer à la ligne suivante.

Les parties xs, sm, md et lg de la classe col correspondent à un point d'arrêt spécifique.

Bootstrap 3 est d'abord mobile, donc si vous spécifiez une classe col à la taille xs, il vous suffit de spécifier une autre classe col si vous souhaitez un comportement différent sur un écran plus large.

Par exemple, si vous voulez 6 unités de grille (soit 2 colonnes ou 50 %) pour tous les écrans MAIS vous voulez 3 unités de grille (soit 4 colonnes ou 25 %) sur les écrans LG (1200px+), vous écririez : class="col-xs-6 col-lg-3".Le résultat est que sur tous les appareils de moins de 1 200 px, vous aurez 2 colonnes et tout ce qui dépasse 1 200 px sera de 4 colonnes.