Input spacing when fields are hidden

Question

I’m trying to solve what I consider a problem, I have some fields that are hidden and are only displayed with some radios are selected and are working, but what I’d like to know is if a way to narrow the spacing that exists today even with the fields being hidden, I know this may and must be some mistake I made, I’m using the Bootstrap 3.

Man Código, I couldn’t insert by Amostra de Código, is getting disfigured so to show inserted by Trecho de código.

<fieldset>
   <div class="row">
      <div class="form-group">
         <div class="col-md-4 col-sm-4">
            <label>Horário de trabalho: Segunda a Sexta *</label>
            <input type="text" name="contact[email]" value="" class="form-control required">
         </div>
         <div class="col-md-4 col-sm-4">
            <label>Horário de trabalho: Sábado *</label>
            <input type="text" name="contact[email]" value="" class="form-control required">
         </div>
         <div class="col-md-4 col-sm-4">
            <label>Horário de Intervalo *</label>
            <input type="text" name="contact[email]" value="" class="form-control required">
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="col-md-12 col-sm-12">
            <label>Jornada de Trabalho *</label>
            <label class="radio">
            <input type="radio" name="JornadaTrabalho" value="1"><i></i> Turno 12 x 36</label>
            <label class="radio">
            <input type="radio" name="JornadaTrabalho" value="2"><i></i> Horas Extras - horário operacional - Sábado</label>
            <label class="radio">
            <input type="radio" name="JornadaTrabalho" value="3"><i></i> Outros Horários</label>										
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="MostraOutrosHorarios col-md-12 col-sm-12" style="display: none;">
            <label>Outros Horários *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="col-md-12 col-sm-12">
            <label>Trabalhou anteriormente na Empresa? *</label>
            <label class="radio">
            <input type="radio" name="Historico" value="1"><i></i> Sim</label>
            <label class="radio">
            <input type="radio" name="Historico" value="2"><i></i> Não</label>
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="MostraHistorico col-md-6 col-sm-6" style="display: none;">
            <label>Informar o Local *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
         <div class="MostraHistorico col-md-6 col-sm-6" style="display: none;">
            <label>Em que período? *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="MostraHistorico col-md-6 col-sm-6" style="display: none;">
            <label>Em que função? *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
         <div class="MostraHistorico col-md-6 col-sm-6" style="display: none;">
            <label>Motivo da saída? *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="col-md-12 col-sm-12">
            <label>Especificar motivo *</label>
            <label class="radio">
            <input type="radio" name="EspecificarMotivo" value="1"><i></i> Aumento de Efetivo</label>
            <label class="radio">
            <input type="radio" name="EspecificarMotivo" value="2"><i></i> Safra (Employer)</label>
            <label class="radio">
            <input type="radio" name="EspecificarMotivo" value="3"><i></i> Substituição</label>										
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="JustificarMotivo col-md-6 col-sm-6" style="display: none;">
            <label>Substituição à *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
         <div class="JustificarMotivo col-md-6 col-sm-6" style="display: none;">
            <label>Motivo da Substituição *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="col-md-12 col-sm-12">
            <label>Recebimento *</label>
            <label class="radio">
            <input type="radio" name="Recebimento" value="1"><i></i> Cheque</label>
            <label class="radio">
            <input type="radio" name="Recebimento" value="2"><i></i> Conta Bancária</label>								
         </div>
      </div>
   </div>
   <div class="row">
      <div class="form-group">
         <div class="MeioPagamento col-md-4 col-sm-4" style="display: none;">
            <label>Banco *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
         <div class="MeioPagamento col-md-4 col-sm-4" style="display: none;">
            <label>Agência *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
         <div class="MeioPagamento col-md-4 col-sm-4" style="display: none;">
            <label>Conta Corrente *</label>
            <input type="text" name="OutrosHorarios" value="" class="form-control required">
         </div>
      </div>
   </div>
</fieldset>

An image to illustrate:

The rectangles in red show the spacing I’m having, I can’t narrow it down and I don’t know if there’s any way to do it.

Answer 1

The suggestion I give you is to use the class in .row external that is with the hidden elements inside, and not direct in the elements that you want to hide understand. For example as I did with this option .row.MostraOutrosHorarios so the . whole Row is hidden and not white space in the layout.

Notice that now this .row is hidden and does not take up space, just like everything inside it.

.row.MostraOutrosHorarios  {
    display: none;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />



    <div class="container">
    <fieldset>
        <div class="row">
           <div class="form-group">
              <div class="col-md-4 col-sm-4">
                 <label>Horário de trabalho: Segunda a Sexta *</label>
                 <input type="text" name="contact[email]" value="" class="form-control required">
              </div>
              <div class="col-md-4 col-sm-4">
                 <label>Horário de trabalho: Sábado *</label>
                 <input type="text" name="contact[email]" value="" class="form-control required">
              </div>
              <div class="col-md-4 col-sm-4">
                 <label>Horário de Intervalo *</label>
                 <input type="text" name="contact[email]" value="" class="form-control required">
              </div>
           </div>
        </div>
        <div class="row">
           <div class="form-group">
              <div class="col-md-12 col-sm-12">
                 <label>Jornada de Trabalho *</label>
                 <label class="radio">
                 <input type="radio" name="JornadaTrabalho" value="1"><i></i> Turno 12 x 36</label>
                 <label class="radio">
                 <input type="radio" name="JornadaTrabalho" value="2"><i></i> Horas Extras - horário operacional - Sábado</label>
                 <label class="radio">
                 <input type="radio" name="JornadaTrabalho" value="3"><i></i> Outros Horários</label>										
              </div>
           </div>
        </div>
        <div class="row MostraOutrosHorarios">
           <div class="form-group">
              <div class=" col-md-12 col-sm-12" style="display: none;">
                 <label>Outros Horários *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
           </div>
        </div>
        <div class="row">
           <div class="form-group">
              <div class="col-md-12 col-sm-12">
                 <label>Trabalhou anteriormente na Empresa? *</label>
                 <label class="radio">
                 <input type="radio" name="Historico" value="1"><i></i> Sim</label>
                 <label class="radio">
                 <input type="radio" name="Historico" value="2"><i></i> Não</label>
              </div>
           </div>
        </div>
        <div class="row">
           <div class="form-group">
              <div class="MostraHistorico col-md-6 col-sm-6" style="display: none;">
                 <label>Informar o Local *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
              <div class="MostraHistorico col-md-6 col-sm-6" style="display: none;">
                 <label>Em que período? *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
           </div>
        </div>
        <div class="row">
           <div class="form-group">
              <div class="MostraHistorico col-md-6 col-sm-6" style="display: none;">
                 <label>Em que função? *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
              <div class="MostraHistorico col-md-6 col-sm-6" style="display: none;">
                 <label>Motivo da saída? *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
           </div>
        </div>
        <div class="row">
           <div class="form-group">
              <div class="col-md-12 col-sm-12">
                 <label>Especificar motivo *</label>
                 <label class="radio">
                 <input type="radio" name="EspecificarMotivo" value="1"><i></i> Aumento de Efetivo</label>
                 <label class="radio">
                 <input type="radio" name="EspecificarMotivo" value="2"><i></i> Safra (Employer)</label>
                 <label class="radio">
                 <input type="radio" name="EspecificarMotivo" value="3"><i></i> Substituição</label>										
              </div>
           </div>
        </div>
        <div class="row">
           <div class="form-group">
              <div class="JustificarMotivo col-md-6 col-sm-6" style="display: none;">
                 <label>Substituição à *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
              <div class="JustificarMotivo col-md-6 col-sm-6" style="display: none;">
                 <label>Motivo da Substituição *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
           </div>
        </div>
        <div class="row">
           <div class="form-group">
              <div class="col-md-12 col-sm-12">
                 <label>Recebimento *</label>
                 <label class="radio">
                 <input type="radio" name="Recebimento" value="1"><i></i> Cheque</label>
                 <label class="radio">
                 <input type="radio" name="Recebimento" value="2"><i></i> Conta Bancária</label>								
              </div>
           </div>
        </div>
        <div class="row">
           <div class="form-group">
              <div class="MeioPagamento col-md-4 col-sm-4" style="display: none;">
                 <label>Banco *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
              <div class="MeioPagamento col-md-4 col-sm-4" style="display: none;">
                 <label>Agência *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
              <div class="MeioPagamento col-md-4 col-sm-4" style="display: none;">
                 <label>Conta Corrente *</label>
                 <input type="text" name="OutrosHorarios" value="" class="form-control required">
              </div>
           </div>
        </div>
     </fieldset>
    </div>