Bootstrap 3 - Spacing between inputs

Question

Bootstrap 3 - Spacing between inputs

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I'm building a form that at some point will have 3 columns and more than 4 rows but I can not make that when starting the new row the spacing between the inputs is respected, see in the block "Identification of the Field of Production" , I already tried some alternatives and it 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:

WhatIneedandIcannotdo,isthis:

css bootstrap-3

asked by anonymous 23.11.2016 / 16:21

2 answers

2

It should be some class not set in the html, below has an example with the structure of the bootstrap, it already comes with standardized margins and spacings, following 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>

23.11.2016 / 16:58

List records without reference in another table Create a div with curve

score 2 · Accepted Answer

In% w / w that determines the size by adding% w / o, has the expected result,% w / o has also been removed 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.