1

Estou com problemas de resolver um simples problema de responsividade utilizando o bootstrap 4. Meu desejo é quando redimensionar para celuar, os inputs, selects e labels estejam sobrepostos e ocupando toda a largura disponivel. Como exemplo de "col-xs-12".

Aqui está um link do codigo que estou utilizando usando o bootply. Pode-se notar que ao selecionar para celular, e deixando mais estreito, é possivel deixar todos sobrepostos e ocupando toda a largura disponivel. Mas deve-se deixar muito estreito.

Já no sistema em que está sendo aplicado isso, é visualizado de forma diferente.

redimensionalidade bootstrap sistema

Os inputs, selects e labels não estão sobrepostos e sim um do lado do outro. Já o botão azul e o laranja estão justapostos.

O meu desejo é que quando eu redimensionar para celular, apareça dessa forma:

inserir a descrição da imagem aqui

E redimensionando para computador, apareça dessa forma:

inserir a descrição da imagem aqui

A segunda imagem, ao redimensionar para computador, ela continua sobreposta, coloquei como exemplo de como desejo fazer. A primeira imagem representa o minimo de redimensionamento possível, assemelhando-se ao modo celular.

1 Resposta 1

1

Cara a forma como vc montou o grid é que ficou bem estranha, não se usa diretamente uma col dentro de outra col, e vc tem que usar os bracking point do Grid, tipo col-12 col-md-2, isso que dizer que em telas MD ou mais vc tem 6 colunas e em telas menores que MD a coluna ocupa a tela inteira.

inserir a descrição da imagem aqui

Segue o código da imagem acima:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>

</style>
</head>

<body>

    <div class="container-fluid mt--7">
        <div class="card shadow" style="border-right:1px;border-color:dimgray;border-style:solid">
            <div class="card-header border-0">
                <form role="form" method="GET">
                    <div class="row">


                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="status-filter">status</label>
                            <select type="text" class="form-control" autocomplete="off" name="status_filter" id="status-filter" data-column="2" placeholder="status">
                                <option class="text-center" value="">Todas</option>
                                <option class="text-center" value="Aguardando">Aguardando</option>
                                <option class="text-center" value="Bem Sucedida">Bem Sucedidas</option>
                                <option class="text-center" value="Em Andamento">Em Andamento</option>
                                <option class="text-center" value="Recusada">Recusadas</option>
                            </select>
                        </div>



                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="temperature-filter">temperatura</label>
                            <select type="text" class="form-control" autocomplete="off" name="temperature_filter" id="temperature-filter" data-column="3" placeholder="temperatura">
                                <option class="text-center" value="">Todas</option>
                                <option class="text-center" value="Fria">Fria</option>
                                <option class="text-center" value="Morna">Morna</option>
                                <option class="text-center" value="Quente">Quente</option>
                            </select>
                        </div>




                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="city-filter">cidade</label>
                            <select type="text" class="form-control" autocomplete="off" name="city_filter" id="city-filter" data-column="5">
                                <option class="text-center" value="">Todas</option>

                            </select>
                        </div>



                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="client-filter">Recentes</label>
                            <select autocomplete="off" class="form-control" name="client_filter_cache" id="client-filter-cache" data-column="0" placeholder="recente">
                                <option class="text-center" value="">Todas</option>
                            </select>
                        </div>



                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label" for="client-filter-all">clientes</label>

                            <input type="text" list="allClients" class="form-control" name="client_filter_all" id="client-filter-all">
                            <datalist id="allClients">

                                <option id="allProspects" class="text-center">nome</option>

                            </datalist>
                        </div>



                        <div class="col-12 col-md-2 text-center">
                            <label class="form-control-label " for="clear-filter">Filtros</label>
                            <button type="submit" class="btn btn-info form-control reset"> <span class="pull-right fa fa-search text-white"></span></button>
                            <button type="reset" class="btn btn-warning form-control"> <span class="pull-right fa fa-redo text-white"></span> LIMPAR FILTROS </button>
                        </div>


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

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

3
  • Funcionou, deu certo. Muito obrigado!!! 19/09/2019 às 17:49
  • @ArthurAbitante Sem problemas meu caro, depois da uma olhada geral na documentação do Grid do BS, vai te ajudar ;) getbootstrap.com/docs/4.0/layout/grid
    – hugocsl
    19/09/2019 às 17:53
  • 1
    Eu havia anteriormente tentado algo parecido, estava indo no caminho para ajustar isso. Porém um simples detalhe que fez ficar com bastante dúvida. Muito obrigado, ajudou bastante!!! 19/09/2019 às 18:02

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 .