Spacing between inputs Bootstrap

Navigation
2

I would like to know how I can add a spacing between selects , for better understanding see image below:

Ihavetriedwithcss:

.col-md-4{margin-bottom:5px;}

Butitgotweird,mycodehtmliscurrentlylikethis:

<divclass="form-group">
  <div class="row">
    <div class="col-md-4">
      <select name="dia" class="form-control">
        <option>Selecione o dia</option>
      </select>
    </div>

    <div class="col-md-4">
      <select name="mes" class="form-control">
        <option>Selecione o mes</option>
      </select>
    </div>

    <div class="col-md-4">
      <select name="ano" class="form-control">
        <option>Selecione o ano</option>
      </select>
    </div>
  </div>
</div>

I await replies [] 's

    
asked by anonymous 10.02.2016 / 18:28

4 answers

0

I found a simple solution, as I am new to Bootstrap, looking at the site I saw that there are options .col.xs-? .col-md-? , I just switched from .col-md to .col-xs and it even made the site design more beautiful, it fit the 3 selects let's say that on a single line.

                                       Select the day                    

    <div class="col-xs-4">
      <select name="mes" class="form-control">
        <option>Selecione o mes</option>
      </select>
    </div>

    <div class="col-xs-4">
      <select name="ano" class="form-control">
        <option>Selecione o ano</option>
      </select>
    </div>
  </div>
</div>
    
10.02.2016 / 18:39
4

Use the bootstrap own classes to do this, in which case, leave the form's items within a div with the class form -group 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group col-md-4">
  <select name="dia" class="form-control">
    <option>Selecione o dia</option>
  </select>
</div>
<div class="form-group col-md-4">
  <select name="mes" class="form-control">
    <option>Selecione o mes</option>
  </select>
</div>
<div class="form-group col-md-4">
  <select name="ano" class="form-control">
    <option>Selecione o ano</option>
  </select>
</div>
    
10.02.2016 / 18:39
1

You should put !important in your css. This way: 

.col-md-4 {margin-bottom: 5px;!important}

Result:

When working with bootstrap, remember this. CSS is basically done. So, to edit what already exists, you need !important

    
10.02.2016 / 18:32
-2

My nonsense is nonsense 

<div class="form-control" style="width:???px; margin-bottom:2px">
    <select runat="server" name="mes" id="mes">
        <option>Selecione o mes</option>
    </select>
</div>

<div class="form-control" style="width:???px; margin-bottom:2px">
    <select name="ano" id="ano">
        <option>Selecione o ano</option>
    </select>
</div>
    
06.01.2018 / 11:36
How do I know if SMS failed to send? Error activating WP_DEBUG