Расположение текстовых полей в одной строке

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 - это все равно что сказать: "делайте этот столбец 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 единиц сетки, прежде чем она будет перенесена на следующую строку.

Части xs, sm, md и lg класса col соответствуют определенной точке останова.

Bootstrap 3 в первую очередь предназначен для мобильных устройств, поэтому, если вы укажете класс col размером xs, вам нужно будет указать другой класс col, только если вы хотите другое поведение на более широком экране.

Например, если вам нужно 6 единиц сетки (что составляет 2 столбца или 50%) для всех экранов, но вам нужно 3 единицы сетки (что составляет 4 столбца или 25%) для экранов lg (1200px +), вы бы написали: class="col-xs-6 col-lg-3".В результате на всех устройствах с разрешением менее 1200 пикселей у вас будет 2 столбца, а все, что превышает 1200 пикселей, будет состоять из 4 столбцов.