1

Olá. Estou construindo uma Dashboard com Bootstrap 4 e me deparei com um problema bem incomodo: quando chego no breakpoint determinado para a linha quebrar (flex-sm-wrap), ela quebra normalmente, mas quando a resolução fica menor, todo conteúdo dentro da row volta para a mesma linha, sendo que as divs das colunas deveriam continuar uma em cima da outra na resolução menor.

         <div class="container cont1">

            <div class="d-flex flex-row justify-content-center mt-5 flex-sm-wrap ">

                <div class="principal_01 col-xs-12 col-sm-12 col-md-7 col-lg-7 border">DIV1</div>

                <div class="principal_02 col-xs-12 col-sm-12 col-md-5 col-lg-4 ml-lg-5 border">
                    <div class="row space"></div>
                        <div class="line1-1">
                            <div class="col-auto">DIV2</div>
                        </div>
                    <div class="row space"></div>
                        <div class="line1-1">
                            <div class="col-auto">DIV3</div>
                        </div>
                </div>

            </div>
        </div>

Já tentei usar clearfix entre a principal_01 e principal_02, porém, nada acontece. No CSS somente tenho umas definições de height e cor de background, que já retirei/modifiquei e persiste com o problema.

1 Resposta 1

2

Troque flex-sm-wrap por flex-wrap flex-md-nowrap

Dessa forma quando for maior que SM não quebra, e sempre que for SM ou menos vai quebrar

inserir a descrição da imagem aqui

Código da imagem acima

<div class="container cont1">

  <div class="d-flex flex-row justify-content-center mt-5 flex-wrap flex-md-nowrap">

    <div class="principal_01 col-xs-12 col-sm-12 col-md-7 col-lg-7 border">DIV1</div>

    <div class="principal_02 col-xs-12 col-sm-12 col-md-5 col-lg-4 ml-lg-5 border">
      <div class="row space"></div>
      <div class="line1-1">
        <div class="col-auto">DIV2</div>
      </div>
      <div class="row space"></div>
      <div class="line1-1">
        <div class="col-auto">DIV3</div>
      </div>
    </div>

  </div>
</div>

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 .