0

Boa tarde, gostaria de saber como organizar os blocos de formulário horizontalmente. A página em que estou me inspirando:inserir a descrição da imagem aqui

Minha página: http://tratspay.com/app/detalhamentotesteform.html

insira o código aqui
0

1 Resposta 1

0

Você precisa adicionar suas "colunas do grid" em uma "linha do grid". Lembra?!

Veja como fica seu código - repare no comentário onde inicia e onde termina a linha do grid:

<form method="post" id="buscarVendas" action="vendas/relatorio/exportar">
                     <input type="hidden" name="exportar" id="exportar" value=""> 
                     <input type="hidden" name="produto" id="produto" value=""> 
                     <input type="hidden" name="afiliado" id="afiliado" value="">
                     <input type="hidden" name="forma_pagamento" id="forma_pagamento" value="">
                     <input type="hidden" name="statusVenda" id="statusVenda" value="">
                     <input type="hidden" name="ant" id="ant" value="">


                     <div class="row"> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) COMEÇA AQUI >>>>>>>>>>>>> -->
                      <div class="col-sm-4">

                        Transação: <input id="transacao" name="transacao" class="form-control " value="" type="text" placeholder="Para pesquisar mais de uma separe por vírgula">

                      </div>

                      <div class="col-sm-4 form-group">

                        Produto:  

                        <select id="produto_select" name="produto_select" class="form-control mutiplo" data-placeholder="Todos produtos">
                          <option value="">Todos os produtos</option>";
                          <option value="34754">Emgrecimento Caps</option><option value="34648">Ovo de colher gourmet</option> 
                        </select>



                      </div>

                      <div class="col-sm-4 form-group">

                         Forma de pagamento:  
                          <select multiple="" class="form-control mutiplo" id="forma_pagamento_select" name="forma_pagamento_select" data-placeholder="Todas formas de pagamento">

                            <option value="1">Cartão de crédito</option>

                            <option value="3" selected="">Boleto</option> 

                            <option value="5">Gratis</option>

                            <option value="6">Outra</option>

                          </select>

                      </div>    



                      <div class="col-sm-4 form-group">

                        Comprador: <input id="comprador" name="comprador" class="form-control " type="text" placeholder="Nome ou e-mail">

                      </div>
                  </div> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) TERMINA AQUI >>>>>>>>>>>>> -->
                  <div class="row"> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) COMEÇA AQUI >>>>>>>>>>>>> -->

                      <div class="col-sm-4 form-group">

                        CPF/CNPJ: <input id="cnpj_cpf" name="cnpj_cpf" class="form-control " type="text" placeholder="CPF/CNPJ do comprador">

                      </div>


                      <div class="col-sm-4 form-group">

                        Data do pedido: <input id="data_pedido" autocomplete="off" name="data_pedido" class="form-control datarange" type="text">

                      </div>
                      <div class="col-sm-4 form-group">

                        Data finalizada: <input autocomplete="off" id="data" name="data" class="form-control datarange" type="text" value="">

                      </div>

                  </div> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) TERMINA AQUI >>>>>>>>>>>>> -->
                  <div class="row"> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) COMEÇA AQUI >>>>>>>>>>>>> -->

                      <div class="col-sm-4 form-group">

                         Status:  
                          <select multiple="" class="form-control mutiplo" id="statusVenda_select" name="statusVenda_select" data-placeholder="Todos status">
                          <option value="1">Aguardando pagamento</option><option value="5">Bloqueada</option><option value="3">Cancelada</option><option value="6">Completa</option><option value="4">Devolvida</option><option value="2">Finalizada</option>                          <option value="99" selected=""> Boleto vencido</option>
                          </select>

                      </div>

                      <div class="col-sm-4 form-group">

                        Afiliado: 
                        <select id="afiliado_select" name="afiliado_select" class="form-control mutiplo" data-placeholder="Todos produtos">
                          <option value="">Todos os afiliados</option>";

                        </select>


                      </div>
                      <div class="col-sm-4 form-group">


                        <label style="line-height: 54px;"><input type="checkbox" name="vendaDireta" id="vendaDireta" value="1"> Somente vendas diretas</label>


                      </div>
                  </div> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) TERMINA AQUI >>>>>>>>>>>>> -->
                  <div class="row"> <!-- <<<<<<<<<<<<<<<<< DIV ROW (LINHA) COMEÇA AQUI >>>>>>>>>>>>> -->

                                            <div class="col-sm-12 form-group">

                         <button type="submit" id="btnBuscar" class="btn btn-primary btn-gradient" data-loading-text="Buscando..."> <span class="fa fa-search"></span> Filtrar</button> 

                      </div>
    </div> <!-- <<<<<<<<<<<<<<<<< DIV ROW TERMINA AQUI >>>>>>>>>>>>> -->



                    </form>

Sei que já te enviei(amos) a documentação do Bootstrap relacionado ao grid, mas aqui vai mais uma vez:

Leitura recomendada: Grid System - Bootstrap

Uma pequena dica para não se perder entre linhas e colunas do grid é assimilar à legítima tabela do HTML: tr é a div.row e td é a div.col-*. Não tem lógica uma td fora de uma tr, tal forma que não tem lógica uma div.col-* fora de uma div.row. Sacou?! ;D

1
  • 1
    Muitíssimo obrigado! Estou aprendendo na raça html e css, ainda me enrolo em algumas coisas.
    – Igor Rosa
    6/03/2019 às 20:23

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .