Bootstrap 3 - Input spacing

Question

Bootstrap 3 - Input spacing

Asked 7 years, 12 months ago

Viewed 2,704 times

1

I’m building a form that in some moments will have 3 columns and more than 4 lines but I am not able to do that when starting the new line the spacing between inputs is respected, see in the block "Identification of the Production Field", I tried some alternatives and did not solve, I tried something like:

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

The form I have is like this:

  <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>

What generates an output like this:

What I need and I’m not getting, is this:

Please post your CSS as well

– leofontes

2016/11/23 at 15:22

2 answers

3

In the div which determines the size when adding the form-control, has the expected result, has also been removed the <br /> to stay the same distance:

<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>

So solving your problem.

Thank you very much David for the great help, perfect.

– adventistapr

2016/11/23 at 15:56

Browser other questions tagged css bootstrap-3

You are not signed in. Login or sign up in order to post.

by Samuel Souza • **468** points · Answer 1 · 2016-11-23T15:58:34+00:00

Must be some class not set in html, below has an example with the bootstrap structure, it already comes with margins and spacing standardized, follows example:

  <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>