2

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:

inserir a descrição da imagem aqui

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

inserir a descrição da imagem aqui

EDIT 2:

inserir a descrição da imagem aqui

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>
2
  • Você poderia informar qual versão do bootstrap está utilizando e inserir seus códigos CSS também?
    – marviano
    28/06/2019 às 20:01
  • @markim Bootstrap 4.3.1. Quanto ao css, nao estou usando neste código... apenas o backgound
    – user153240
    28/06/2019 às 20:02

1 Resposta 1

2

Vc pode seguir a documentação do inline-forms do Bootstrap para conseguir esse layout https://getbootstrap.com/docs/4.0/components/forms/#inline-forms veja que não precisa de CSS extra nem nada do tipo. Repare que na tag form vc tem que declarar a classe form-inline

Segue o modelo com o seu código

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

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header text-center">
                    <b>Período</b>
                </div>
                <div class="card-body float-left w-100">

                    <form class="form-inline">
                        <div class="form-check">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>


EDIT 1

Se vc quer ter dois grupos input/label por linha vc usa col-6, se quer só um use col-12, 3 por linha col-4 etc... Sobre o topo do Card aqui está normal, talvez vc tenha esquecido alguma div sem fechar, o colocou alguma classe no elemento errado...

inserir a descrição da imagem aqui

Segue o código da imagem acima

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

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header text-center">
                    <b>Período</b>
                </div>
                <div class="card-body float-left w-100">

                    <form class="form-inline">
                        <div class="col-6 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                        <div class="col-6 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                        <div class="col-12 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control w-auto" id="dt_in">
                        </div>
                        <div class="col-md-4 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                        <div class="col-md-4 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                        <div class="col-md-4 form-group mb-2">
                            <label class="form-check-label" for="dt_in"><b>Data Inicial: </b></label>
                            <input type="date" class="form-control" id="dt_in">
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</div>

10
  • Hugo, obrigado pela resposta. Eu não deixei tão detalhado na pergunta, peço desculpas. Mas eu vou precisar colocar uma "hora inicial" na mesma linha, porem no canto direito e depois ainda um "data final" e "hora final" na linha debaixo, então precisarei ficar criando um form para cada linha ? acho que fica inviável, já que depois vou precisar fazer um post de todas as informações. Teria alguma outra forma?
    – user153240
    1/07/2019 às 15:32
  • Na verdade na div do form está escrito class="form-check", remova isso é coloque class="form-group col-12". Depois disso vc pode replicar quantas vezes quiser essa Div que elas sempre vão ficar uma abaixo da outra tipo assim prntscr.com/o949ov
    – hugocsl
    1/07/2019 às 15:45
  • Hugo, 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
    – user153240
    1/07/2019 às 17:17
  • @Lima veja o edit que deixei na resposta
    – hugocsl
    1/07/2019 às 17:42
  • 1
    Perfeito. Funcionou, obrigado.
    – user153240
    1/07/2019 às 18:24

Você deve fazer log-in para responder a esta pergunta.