1

Estou construindo um form que em alguns momentos terá 3 colunas e mais de 4 linhas mas não estou conseguindo fazer que ao começar a nova linha o espaçamento entre os inputs seja respeitado, veja no bloco "Identificação do Campo de Produção", já tentei algumas alternativas e não resolveu, tentei algo como:

<div class="clearfix"></div>

O form que tenho está assim:

  <div class="widget-body">
<form>
  <fieldset>
    <legend>Identificação do Responsável Técnico</legend>
    <div class="form-group">
      <label>Agrônomo - Técnico *</label>
      <input class="form-control" placeholder="Text field" type="text">
    </div>
  </fieldset>
  <fieldset>
    <legend>Identificação do Produtor</legend>
    <div class="form-group">
      <label>Nome *</label>
      <input class="form-control" placeholder="Text field" type="text">
    </div>
  </fieldset>
  <fieldset>
    <legend>Identificação do Campo de Produção</legend>
    <div class="row">
      <div class="col-md-2 col-sm-2">
        <label>ID *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-9 col-sm-9">
        <label>Cooperante *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-1 col-sm-1">
        <label>Zoom</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-md-2 col-sm-2">
        <label>Propriedade *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-10 col-sm-10">
        <label>Vistoria *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 col-sm-2">
        <label>UF *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-10 col-sm-10">
        <label>Município *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
    </div>
    <div class="row">
      <div class="col-md-10 col-sm-10">
        <label>Categoria *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-2 col-sm-2">
        <label>Campo *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
    </div>
    <div class="form-group">
      <label>Espécie *</label>
      <input class="form-control" placeholder="Text field" type="text">
    </div>
  </fieldset>
</form>

O que gera uma saída assim:

inserir a descrição da imagem aqui

O que preciso e não estou conseguindo, é isso:

inserir a descrição da imagem aqui

1
  • Por favor posta o seu CSS também
    – leofontes
    Commented 23/11/2016 às 15:22

2 Respostas 2

3

Na div que determina o tamanho ao adicionar o form-control, tem o resultado esperado, também foi retirado o <br /> para ficar com a mesma distância:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="widget-body">
<form>
  <fieldset>
    <legend>Identificação do Responsável Técnico</legend>
    <div class="form-group">
      <label>Agrônomo - Técnico *</label>
      <input class="form-control" placeholder="Text field" type="text">
    </div>
  </fieldset>
  <fieldset>
    <legend>Identificação do Produtor</legend>
    <div class="form-group">
      <label>Nome *</label>
      <input class="form-control" placeholder="Text field" type="text">
    </div>
  </fieldset>
  <fieldset>
    <legend>Identificação do Campo de Produção</legend>
    <div class="row">
      <div class="col-md-2 col-sm-2 form-group">
        <label>ID *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-9 col-sm-9 form-group">
        <label>Cooperante *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-1 col-sm-1 form-group">
        <label>Zoom</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 col-sm-2 form-group">
        <label>Propriedade *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-10 col-sm-10 form-group">
        <label>Vistoria *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 col-sm-2 form-group">
        <label>UF *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-10 col-sm-10 form-group">
        <label>Município *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
    </div>
    <div class="row">
      <div class="col-md-10 col-sm-10 form-group">
        <label>Categoria *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
      <div class="col-md-2 col-sm-2 form-group">
        <label>Campo *</label>
        <input type="text" class="form-control" placeholder="Text field">
      </div>
    </div>
    <div class="form-group">
      <label>Espécie *</label>
      <input class="form-control" placeholder="Text field" type="text">
    </div>
  </fieldset>
</form>
</div>

Assim resolvendo seu problema.

1
  • Muitíssimo obrigado David pela grande ajuda, perfeito. Commented 23/11/2016 às 15:56
2

Deve ser alguma classe não setada no html, abaixo tem um exemplo com a estrutura do bootstrap, ele já vem com margens e espaçamentos padronizados, segue exemplo:

  <h3>4 colunas</h3>    
  <div class="row">
    <div class="col-md-3">
     <div class="form-group">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  </div>

  <div class="col-md-3">
    <div class="form-group">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  </div>
  <div class="col-md-3">
    <div class="form-group">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  </div>
</div>

<h3>3 colunas</h3>

<div class="row">
  <div class="col-md-4">
   <div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
</div>

<div class="col-md-4">
  <div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
</div>

<div class="col-md-4">
  <div class="form-group">
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
</div>
</div>

<h3>2 colunas</h3>

<div class="row">
  <div class="col-md-10">
    <div class="form-group">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  </div>

  <div class="col-md-2">
    <div class="form-group">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  </div>
</div>

<h3>1 coluna</h3>
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
  </div>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .