Olá, estou utilizando o bootstrap para montar minha página html e estou tendo um problema com o form-control.
Eu gostaria que a minha label e o meu input ficassem na mesma linha, um próximo ao outro, mas o mais pero que consegui chegar foi isso:
que ainda não está suficiente, sinto que estão longes ainda.
meu código é esse:
<div class="card">
<div class="card-header text-center">
<b>Período</b>
</div>
<div class="card-body">
<div class="row float-left w-100">
<div class="col-3">
<label for="dt_in"><b>Data Inicial: </b></label>
</div>
<div class="col-3">
<input type="date" class="form-control" id="dt_in">
</div>
</div>
</div>
</div>
Como eu faço para deixá-las juntas?
OBS: Coloquei essa row
e esses col
pois o input
estava ficando na linha debaixo, e não na mesma linha da label
.
Outra coisa, eu gostaria de alinhar verticalmente essa label, pois comparada ao input, ela prece estar mais para cima.
EDIT 1:
Ainda estou tendo alguns problemas, vou deixar o print na pergunta, se você puder dar uma olhada em como está, eu agradeço. Os elementos ainda não estão da maneira correta, e se vc observar o header do card, ele esta errado nas laterais, acaba onde não era para acabar sabe. Enfim, vai estar la o print
EDIT 2:
Meu form:
<form action="#" method="post" class="form-inline">
@***CARD PERIODO***@
<div class="card w-100">
<div class="card-header text-center">
<b>Período</b>
</div>
<div class="card-body float-left w-100">
<div class="form-group col-6 mb-2">
<label class="switch mt-2 form-check-label"><input type="checkbox"><span class="slider round"></span></label>
<label class="form-check-label mr-2" for="dt_in"><b>Data Inicial: </b></label>
<input type="date" class="form-control" id="dt_in">
</div>
<div class="form-group col-6 mb-2">
<label class="switch mt-2 form-check-label"><input type="checkbox"><span class="slider round"></span></label>
<label class="form-check-label mr-2" for="dt_in"><b>Hora Inicial: </b></label>
<input type="time" class="form-control" id="hr_in">
</div>
<div class="form-group col-6 mb-2">
<label class="switch mt-2 form-check-label"><input type="checkbox"><span class="slider round"></span></label>
<label class="form-check-label mr-2" for="dt_in"><b>Data Final: </b></label>
<input type="date" class="form-control" id="dt_fim">
</div>
<div class="form-group col-6 mb-2">
<label class="switch mt-2 form-check-label"><input type="checkbox"><span class="slider round"></span></label>
<label class="form-check-label mr-2" for="dt_in"><b>Hora Final: </b></label>
<input type="time" class="form-control" id="hr_fim">
</div>
</div>
</div>
<br>
@***CARD SELEÇÕES***@
<div class="card mt-3 w-100">
<div class="card-header text-center">
<b>Seleções</b>
</div>
<div class="card-body float-left w-100">
<div class="form-group col-12 d-flex justify-content-between">
<label class="form-check-label mr-2" for="cl_1"><b>Cliente 1: </b></label>
<div class="inputWithIcon">
<input name="cl_1" id="cl_1" class="form-control pl-2" type="text" maxlength="50">
<a id="pesquisaCliente1" onclick="pesqC1"><i class="fas fa-search olho mt-2"></i></a>
</div>
<label class="form-check-label mr-2" for="produto"><b>Produto: </b></label>
<div class="inputWithIcon">
<input name="produto" id="produto" class="form-control pl-2" type="text" maxlength="50">
<a id="pesquisaProduto" onclick="pesqP"><i class="fas fa-search olho mt-2"></i></a>
</div>
<label class="form-check-label mr-2" for="func_1"><b>Func. 1: </b></label>
<div class="inputWithIcon">
<input name="func_1" id="func_1" class="form-control pl-2" type="text" maxlength="50">
<a id="pesquisaFunc1" onclick="pesqF1"><i class="fas fa-search olho mt-2"></i></a>
</div>
</div>
</div>
</div>
<br>
@***CARD PESQUISAS***@
<div class="card mt-3 w-100">
<div class="card-header text-center">
<b>Pesquisas</b>
</div>
<div class="card-body">
<div class="inputWithIcon w-50 float-left">
<input type="text" name="consulta" id="txt_consulta" autofocus placeholder="Consultar Opções" class="form-control" onkeyup="mudarPesquisaSelect()" style="margin: 0;">
<i class="fa fa-search fa-lg fa-fw esq" aria-hidden="true"></i>
</div>
<select class="form-control w-25 float-right" id="grupo" onchange="mudarPesquisaSelect()">
<option value="P">Períodos</option>
<option value="A">Análises</option>
<option value="S">Seleções</option>
<option value="F">Filtros</option>
<option value="T">Totalizações</option>
<option value="O">Ordem</option>
<option value="All">Todos</option>
</select>
<label class="float-right" style="margin-right: 10px;"><b>Grupos:</b> </label>
<br>
<br>
<div class="">
<table id="tabela" class="table table-hover overflow-auto">
<thead>
<tr>
<th scope="col">Opções</th>
<th scope="col">Valores</th>
</tr>
</thead>
<tbody id="tbody">
<tr class="P">
<td class="pesq">1: Data: Cancelamento</td>
<td>
<select class="form-control w-100">
<option value="NA">Não analizar</option>
<option value="S">Sim</option>
<option value="N">Não</option>
</select>
</td>
</tr>
<tr class="A">
<td class="pesq">140: Analisar fretes: Fob</td>
<td>
<select class="form-control w-100">
<option value="NA">Não analizar</option>
<option value="S">Sim</option>
<option value="N">Não</option>
</select>
</td>
</tr>
<tr class="S">
<td class="pesq">162: Centro de custo da operação</td>
<td>
<div class="inputWithIconTable w-100">
<input type="text" class="form-control">
<i class="fa fa-search fa-sm fa-fw esq" aria-hidden="true"></i>
</div>
</td>
</tr>
<tr class="F">
<td class="pesq">205: Filtrar: clientes 1</td>
<td>
<select class="form-control w-100">
<option value="NA">Filtro não informado</option>
<option value="S">Sim</option>
<option value="N">Não</option>
</select>
</td>
</tr>
<tr class="T">
<td class="pesq">222: Totalizar no nível 1 por </td>
<td>
<select class="form-control w-100">
<option value="NA">Não totalizar</option>
<option value="S">Cliente 1 - Entidade: código</option>
</select>
</td>
</tr>
<tr class="O">
<td class="pesq">230: 1º ordem </td>
<td>
<select class="form-control w-100">
<option value="NA">Não ordenar</option>
<option value="S">Ascendente</option>
<option value="N">Descendente</option>
</select>
</td>
</tr>
<tr id="semResultado" style="display: none;">
<td colspan='2'><center>Nenhum resultado foi encontrado</center></td>
</tr>
</tbody>
</table>
</div>
<div class="float-right">
<button type="reset" class="btn btn-danger" onclick="mudarPesquisaSelect()"><i class="fa fa-trash"></i> Opções</button>
<button type="submit" class="btn btn-success"><i class="fa fa-cogs"></i> Processar</button>
<button type="button" class="btn btn-primary" onclick="window.history.back();"><i class="fa fa-undo-alt"></i> Retornar</button>
</div>
</div>
</div>
</form>