我的字段显示在第二行而不是第三行

Question

我有这个表格（第一张图片），它有3列3行。当我将radiobutton Buscarpormês更改为 Buscar por dias 时，它会稍微改变一下（第二张图像）。

Formatação需要保留2列和3行，但不会发生。

我曾尝试添加隐藏的div <div style="visibility: hidden"></div>以占用一些空间，但我失败了。

我的HTML

<div class="container-fluid space-top">
<div class="panel panel-default">
    <div class="panel-heading">
        <div class="btn-group">
        <button class="btn btn-default toggle-dropdown just-icon" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
            <span class="glyphicon glyphicon-search"></span>
        </button>
            <ul id="opcao-dropdown" class="dropdown-menu dropdown-menu-right">
                <li><a href="#">Buscar por período</a></li>
                <li><a href="#">Buscar por mês</a></li>
                <li><a href="#">Buscar por dias</a></li>
            </ul>
        </div>
        <h3 id="titulo-periodo" class="panel-title">Tela Teste - Buscar por período</h3>
        <h3 id="titulo-mes" class="panel-title">Tela Teste - Buscar por mês</h3>
        <h3 id="titulo-dias" class="panel-title">Tela Teste - Buscar por dias</h3>
    </div>

    <div class="panel-body">
        <form>
            <div id="selectDiv" class="col-sm-3">
                <div class="form-group row">
                    <label for="f-option1">
                        <input onClick="checkPeriodo()" type="radio" id="f-option1" name="selector" checked>
                        Buscar por período
                    </label>
                </div>      
                <div class="form-group row">
                    <label for="f-option2">
                    <input onClick="checkMes()" type="radio" id="f-option2" name="selector">
                    Buscar por mês</label>
                </div>    
                <div class="form-group row">
                    <label for="f-option3">
                    <input onClick="checkDias()" type="radio" id="f-option3" name="selector">
                    Buscar por dias</label>
                </div>
            </div>

            <div class="col-sm-4">
                <div class="form-group row">
                    <div id="buscar-periodo-inicial">
                        <label for="periodo-inicial" class="control-label">Data Inicial:</label>
                        <div class="form-inline">
                            <input type="date" class="form-control" name="bday">
                        </div>
                    </div>

                    <div id="buscar-mes-inicial">
                        <label for="periodo" class="control-label">Mês inicial:</label>
                        <div class="form-inline">
                            <select class="form-control" id="sel1">
                                <option>Fevereiro</option>
                                <option>Dezembro</option>
                                <option>Janeiro</option>
                                <option>Julho</option>
                            </select>

                            <select class="form-control" id="sel1">
                                <option>2016</option>
                                <option>2015</option>
                                <option>2014</option>
                                <option>2013</option>
                            </select>
                        </div>
                    </div>

                    <div id="buscar-dias" class="btn-toolbar">
                        <label for="inputEmail3" data-toggle="tooltip" class="control-label" title="A partir do dia atual">Últimos dias:</label>
                        <div class="btn-group" role="group" data-toggle="buttons">
                            <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option5">10</label>
                            <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option6">30</label>
                            <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option7">60</label>
                            <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option8">90</label>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div id="buscar-mes-final">
                        <label for="periodo" class="control-label">Mês final:</label>
                        <div class="form-inline">
                            <select class="form-control" id="sel1">
                                <option>Dezembro</option>
                                <option>Dezembro</option>
                                <option>Janeiro</option>
                                <option>Julho</option>
                            </select>

                            <select class="form-control" id="sel1">
                                <option>2016</option>
                                <option>2015</option>
                                <option>2014</option>
                                <option>2013</option>
                            </select>
                        </div>
                    </div>

                    <div id="buscar-periodo-final">
                        <label for="periodo-final" class="col-form-label">Data Final:</label>
                        <div class="form-inline">
                            <input type="date" class="form-control" name="bday">
                        </div>
                    </div>


                </div>
                <div class="form-group row">
                    <div id="buscar-periodo-intervalos">
                        <label class="control-label" data-toggle="tooltip" title="Escolha até 5 intervalos de tempo em minutos para a consulta">Intervalos:</label>
                        <div class="form-inline">
                            <select class="form-control" id="sel1">
                                <option>0</option>
                                <option>1</option>
                            </select>
                            <select class="form-control" id="sel1">
                                <option>0</option>
                                <option>1</option>
                            </select>
                            <select class="form-control" id="sel1">
                                <option>0</option>
                                <option>1</option>
                            </select>
                            <select class="form-control" id="sel1">
                                <option>0</option>
                                <option>1</option>
                            </select>
                            <select class="form-control" id="sel1">
                                <option>0</option>
                                <option>1</option>
                            </select>
                        </div>
                    </div>
                    <div id="buscar-mes-formatacao">
                        <label for="inputEmail3" data-toggle="tooltip" class="col-form-label" title="Exibir gráficos em três formatos diferentes">Formatação:</label>
                        <div class="form-inline">
                            <select class="form-control" id="sel1">
                                <option>Porcentagem</option>
                                <option>Percentil</option>
                                <option>Média</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-5">
                <div class="form-group row">
                    <div id="buscar-veiculo">
                        <label for="inputEmail2" class="col-form-label">Veículo:</label>
                        <div class="form-inline">
                            <select class="form-control" id="sel1">
                                <option>Locomotiva</option>
                                <option>Trem</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div id="buscar-dias-espaco"></div>
                    <label for="inputEmail3" class="col-form-label">Posto:</label>
                        <div class="form-inline">
                            <select class="form-control" id="sel1">
                                <option>Azul</option>
                                <option>Vermelho</option>
                                <option>Verde</option>
                                <option>Branco</option>
                            </select>
                        </div>
                    </div>
                <div class="form-group row">
                    <button type="submit" class="btn btn-default">Consultar</button>
                </div>  
            </div>
        </form>
    </div>
</div>

小提琴 https://jsfiddle.net/marquesm91/jkk034qj/1/

Answer 1

$('#f-option1').on('click', function(){
		$('#titulo-periodo').show();
    $('#buscar-periodo-inicial').show(); 
    $('#buscar-periodo-final').show();
    $('#buscar-periodo-intervalos').show();
    
    $('#titulo-mes').hide();
    $('#buscar-mes-inicial').hide();
  $( '#row-final' ).show();
    $('#buscar-mes-final').hide();
    $('#buscar-mes-formatacao').hide();
    $('#buscar-veiculo').show();
    
    $('#titulo-dias').hide();
    $('#buscar-dias').hide();
    $('#botao-consulta-dias').hide();
    $('#buscar-dias-espaco').hide();
    $('#buscar-dias-veiculo').hide();

});

$('#f-option2').on('click', function(){
		$('#titulo-periodo').hide();
    $('#buscar-periodo-inicial').hide(); 
    $('#buscar-periodo-final').hide();
    $('#buscar-periodo-intervalos').hide();

    $('#titulo-mes').show();
    $('#buscar-mes-inicial').show();
  $( '#row-final' ).show();
    $('#buscar-mes-final').show();
    $('#buscar-mes-formatacao').show();
    $('#buscar-veiculo').show();

    $('#titulo-dias').hide();
    $('#buscar-dias').hide();
    $('#botao-consulta-dias').hide();
    $('#buscar-dias-espaco').hide();
    $('#buscar-dias-veiculo').hide();

});
$('#f-option3').on('click', function(){
		$('#titulo-periodo').hide();
    $('#buscar-periodo-inicial').hide(); 
    $('#buscar-periodo-final').hide();
    $('#buscar-periodo-intervalos').hide();
    
    $('#titulo-mes').hide();
    $('#buscar-mes-inicial').hide();
  $( '#row-final' ).hide();
    $('#buscar-mes-final').hide();
    $('#buscar-mes-formatacao').show();
    $('#buscar-veiculo').show();

    $('#titulo-dias').show();
    $('#buscar-dias').show();
    $('#botao-consulta-dias').show();
    $('#buscar-dias-espaco').show();
    $('#buscar-dias-veiculo').show();

});
    
    $('[data-toggle="tooltip"]').tooltip();
    
    $('#titulo-mes').hide();
    $('#buscar-mes-inicial').hide();
    $('#buscar-mes-final').hide();
    $('#buscar-mes-formatacao').hide();

    $('#titulo-periodo').show();
    $('#buscar-periodo-inicial').show();
    $('#buscar-periodo-final').show();
    $('#buscar-periodo-intervalos').show();
    
    $('#titulo-dias').hide();
    $('#buscar-dias').hide();
    $('#botao-consulta-dias').hide();
    
    $('#opcao-dropdown li').on('click', function(){
        var option = $(this).text();
        
        if(option === "Buscar por período") {
            $('#titulo-periodo').show();
            $('#buscar-periodo-inicial').show(); 
            $('#buscar-periodo-final').show();
            $('#buscar-periodo-intervalos').show();

            $('#titulo-mes').hide();
            $('#buscar-mes-inicial').hide();
            $('#buscar-mes-final').hide();
            $('#buscar-mes-formatacao').hide();
            $('#buscar-veiculo').show();

            $('#titulo-dias').hide();
            $('#buscar-dias').hide();
            $('#botao-consulta-dias').hide();
            $('#buscar-dias-espaco').hide();
            $('#buscar-dias-veiculo').hide();
        }
        else if (option === "Buscar por mês") {
            $('#titulo-periodo').hide();
            $('#buscar-periodo-inicial').hide(); 
            $('#buscar-periodo-final').hide();
            $('#buscar-periodo-intervalos').hide();

            $('#titulo-mes').show();
            $('#buscar-mes-inicial').show();
            $('#buscar-mes-final').show();
            $('#buscar-mes-formatacao').show();
            $('#buscar-veiculo').show();

            $('#titulo-dias').hide();
            $('#buscar-dias').hide();
            $('#botao-consulta-dias').hide();
            $('#buscar-dias-espaco').hide();
            $('#buscar-dias-veiculo').hide();
            
        }
        else if (option === "Buscar por dias") {
            $('#titulo-periodo').hide();
            $('#buscar-periodo-inicial').hide(); 
            $('#buscar-periodo-final').hide();
            $('#buscar-periodo-intervalos').hide();

            $('#titulo-mes').hide();
            $('#buscar-mes-inicial').hide();
            $('#buscar-mes-final').hide();
            $('#buscar-mes-formatacao').show();
            $('#buscar-veiculo').show();

            $('#titulo-dias').show();
            $('#buscar-dias').show();
            $('#botao-consulta-dias').show();
            $('#buscar-dias-espaco').show();
            $('#buscar-dias-veiculo').show();
        }
    });
    
    if($('input[name="selector"]').is(':checked')){
        $('input[name="selector"]:checked').trigger('click');
    }

.form-control {
  padding-left: 5px;
}



label {
    /* Other styling.. */
    text-align: right;
    
    float:left;
    margin-right: 15px;
}

label[for=buttons] {
    /* Other styling.. */
    margin-right: 0px;
}

.space-top {
  padding-top: 20px;
  padding-bottom: 20px;
}

.container {
  background-color: #eee;
}

body {
  background-color: black;
}

label {
  padding-top: 6px;
  white-space: nowrap;
}

.panel-heading .btn-group {
   float: right;
}

.btn-group-horizontal .btn {
display: inline !important;
}

.panel-heading {
   padding-right: 15px;
}

.just-icon {
    padding: 0;
    border: none;
    background: none;
    background-color: #fff;
}

.toggle-dropdown,
.toggle-dropdown:hover,
.toggle-dropdown:focus {
    border-color: #fff;
    background-color: #fff;
    /*color: #357ebd;*/
    outline: none !important;
}

.glyphicon-search {
    font-size: 150%;
}

.btn-default {
    outline: none !important;
    
}

.btn-group btn btn-default:focus {
    background-color: black;
}

.btn:active,
.btn.active {
    -webkit-box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.5);
}

.padd-left1 {
    margin-left:-0.4%;
}

.padd-left2 {
    margin-left:-0.6%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid space-top">
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="btn-group">
            <button class="btn btn-default toggle-dropdown just-icon" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
                <span class="glyphicon glyphicon-search"></span>
            </button>
                <ul id="opcao-dropdown" class="dropdown-menu dropdown-menu-right">
                    <li><a href="#">Buscar por período</a></li>
                    <li><a href="#">Buscar por mês</a></li>
                    <li><a href="#">Buscar por dias</a></li>
                </ul>
            </div>
            <h3 id="titulo-periodo" class="panel-title">Tela Teste - Buscar por período</h3>
            <h3 id="titulo-mes" class="panel-title">Tela Teste - Buscar por mês</h3>
            <h3 id="titulo-dias" class="panel-title">Tela Teste - Buscar por dias</h3>
        </div>

        <div class="panel-body">
            <form>
                <div id="selectDiv" class="col-sm-3">
                    <div class="form-group row">
                        <label for="f-option1">
                            <input type="radio" id="f-option1" name="selector" checked>
                            Buscar por período
                        </label>
                    </div>      
                    <div class="form-group row">
                        <label for="f-option2">
                        <input type="radio" id="f-option2" name="selector">
                        Buscar por mês</label>
                    </div>    
                    <div class="form-group row">
                        <label for="f-option3">
                        <input type="radio" id="f-option3" name="selector">
                        Buscar por dias</label>
                    </div>
                </div>
                
                <div class="col-sm-4">
                    <div class="form-group row">
                        <div id="buscar-periodo-inicial">
                            <label for="periodo-inicial" class="control-label">Data Inicial:</label>
                            <div class="form-inline">
                                <input type="date" class="form-control" name="bday">
                            </div>
                        </div>
                        
                        <div id="buscar-mes-inicial">
                            <label for="periodo" class="control-label">Mês inicial:</label>
                            <div class="form-inline">
                                <select class="form-control" id="sel1">
                                    <option>Fevereiro</option>
                                    <option>Dezembro</option>
                                    <option>Janeiro</option>
                                    <option>Julho</option>
                                </select>

                                <select class="form-control" id="sel1">
                                    <option>2016</option>
                                    <option>2015</option>
                                    <option>2014</option>
                                    <option>2013</option>
                                </select>
                            </div>
                        </div>
                        
                        <div id="buscar-dias" class="btn-toolbar">
                            <label for="inputEmail3" data-toggle="tooltip" class="control-label" title="A partir do dia atual">Últimos dias:</label>
                            <div class="btn-group" role="group" data-toggle="buttons">
                                <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option5">10</label>
                                <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option6">30</label>
                                <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option7">60</label>
                                <label for="buttons" class="btn btn-default"><input type="radio" name="options" id="option8">90</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row" id="row-final">
                        <div id="buscar-mes-final">
                            <label for="periodo" class="control-label">Mês final:</label>
                            <div class="form-inline">
                                <select class="form-control" id="sel1">
                                    <option>Dezembro</option>
                                    <option>Dezembro</option>
                                    <option>Janeiro</option>
                                    <option>Julho</option>
                                </select>

                                <select class="form-control" id="sel1">
                                    <option>2016</option>
                                    <option>2015</option>
                                    <option>2014</option>
                                    <option>2013</option>
                                </select>
                            </div>
                        </div>

                        <div id="buscar-periodo-final">
                            <label for="periodo-final" class="col-form-label">Data Final:</label>
                            <div class="form-inline">
                                <input type="date" class="form-control" name="bday">
                            </div>
                        </div>
                        
                       
                    </div>
                    <div class="form-group row">
                        <div id="buscar-periodo-intervalos">
                            <label class="control-label" data-toggle="tooltip" title="Escolha até 5 intervalos de tempo em minutos para a consulta">Intervalos:</label>
                            <div class="form-inline">
                                <select class="form-control" id="sel1">
                                    <option>0</option>
                                    <option>1</option>
                                </select>
                                <select class="form-control" id="sel1">
                                    <option>0</option>
                                    <option>1</option>
                                </select>
                                <select class="form-control" id="sel1">
                                    <option>0</option>
                                    <option>1</option>
                                </select>
                                <select class="form-control" id="sel1">
                                    <option>0</option>
                                    <option>1</option>
                                </select>
                                <select class="form-control" id="sel1">
                                    <option>0</option>
                                    <option>1</option>
                                </select>
                            </div>
                        </div>
                        <div id="buscar-mes-formatacao">
                            <label for="inputEmail3" data-toggle="tooltip" class="col-form-label" title="Exibir gráficos em três formatos diferentes">Formatação:</label>
                            <div class="form-inline">
                                <select class="form-control" id="sel1">
                                    <option>Porcentagem</option>
                                    <option>Percentil</option>
                                    <option>Média</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-sm-5">
                    <div class="form-group row">
                        <div id="buscar-veiculo">
                            <label for="inputEmail2" class="col-form-label">Veículo:</label>
                            <div class="form-inline">
                                <select class="form-control" id="sel1">
                                    <option>Locomotiva</option>
                                    <option>Trem</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div id="buscar-dias-espaco"></div>
                        <label for="inputEmail3" class="col-form-label">Posto:</label>
                            <div class="form-inline">
                                <select class="form-control" id="sel1">
                                    <option>Azul</option>
                                    <option>Vermelho</option>
                                    <option>Verde</option>
                                    <option>Branco</option>
                                </select>
                            </div>
                        </div>
                    <div class="form-group row">
                        <button type="submit" class="btn btn-default">Consultar</button>
                    </div>  
                </div>
            </form>
        </div>
    </div>
</div>

Answer 2

这是codepen

将此代码添加到CSS样式

.space {
  margin-top: 35px;
}

和这个JS代码

$('#buscar-mes-formatacao').addClass('space');

到（它是44代码行）$('#f-option3').on('click', function()

不要忘记通过添加

从选项1和2中删除类空间

$('#buscar-mes-formatacao').removeClass('space');

分别为$('#f-option1')和$('#f-option2')

这可能不是最佳选择，但它解决了问题