我有这个表格(第一张图片)，它有 3 列和 3 行。当我将单选按钮 Buscar por mê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>
最佳答案
这是一个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')
这可能不是最好的选择，但它解决了问题
关于html - 我的字段显示在第二行而不是第三行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40546900/