Caixa de texto arranjo em uma linha

Question

Eu estou tentando organizar caixas de texto em uma linha usando bootstreap3, Problema é que as caixas de texto são sobrepostos eu quero remover a sobreposição e quer mostrar dados em uma linha.Demonstração de código abaixo, é http://jsfiddle.net/xrcwrn/h5A33/

Meu código é

<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

A principal razão para isto é que você não tenha dado o seu entradas .formulário de controle de classe.Há também alguns erros na marcação com errôneo extra citações que você deve corrigir, mas isso não é a causa para os problemas de sobreposição.

Além disso, é desnecessário ter col-xs-1, cl-sm-1, cl-lg-1.Usando o xs classe por si só será suficiente.Pensar em coluna de classes como sendo aditivo.A adição de col-xs-1 é uma espécie de, como dizer, "tornar esta coluna 1/12 em cada ponto de interrupção a partir deste ponto para a frente, até que eu diga o contrário."

Como você tem 6 elementos, na verdade, eu feitas a cada 2 grelha de unidades de cada um abaixo.Que vai ajudar um pouco com a quebra automática de linha em seus rótulos, a menor largura de dispositivos.

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>

EDITAR - Melhor explicação para col classes:

Coluna de classes permitem que você especifique o número de unidades da grade que uma coluna deve ocupar.Por padrão, cada linha pode conter 12 unidades da grade antes de quebrar para a próxima linha.

O xs, sm, md, e lg parte do col classe corresponde a um ponto de interrupção.

Bootstrap 3 é o primeiro celular, por isso, se você especificar uma coluna de classe no tamanho xs, você só precisa especificar outro col classe, se você quer um comportamento diferente em uma tela mais larga.

Por exemplo, se pretender 6 unidades da grade (que é de 2 colunas ou 50%) para todas as telas que você deseja 3 unidades da grade (que é de 4 colunas ou 25%) sobre lg telas (1200px+), você deve escrever: class="col-xs-6 col-lg-3".O resultado é que em todos os dispositivos que estão a menos de 1200px, você terá 2 colunas e tudo sobre o 1200px será de 4 colunas.