0

Preciso que as colunas flutuem uma ao lado da outra dentro de um card. Para isso defini a primeira coluna para ocupar 8 espaços e a segunda 4.

col-8 e col-4 

Porém elas não estão flutuando uma ao lado da outra.

Preciso do seguinte comportamento. Como esta

Porém mesmo a primeira sendo col-8 e a segunda col-4 ela não flutua ao lado, já tentei diminuir os valores e mesmo assim sem sucesso. O único css externo que estou aplicando é em relação as fontes.

    <div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="cards text-nowrap">
        <div class="col-8">
          <p>Lorem, ipsum dolor.</p>
          <p>Lorem, ipsum.</p>
          <i class="fas fa-calendar-alt"></i>
          <p>23/04/2019 - 23/04/2022</p><br>
          <button class="btn-danger mt-3">danger</button>
        </div>
        <div class="col-4">
          <div class="circle">
            <i class="fas fa-shield-alt"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1 Resposta 1

3

Não está funcionando pq uma COL deve ser filha de uma ROW

In a grid layout, content must be placed within columns and only columns may be immediate children of rows.

PORTUGUÊS: "Em um layout do grid, o conteúdo deve ser colocado dentro de columns e somente columns podem ser filhos imediatos de rows."

Toda COL deve ser filha de uma ROW, então basta colocar um ROW por fora das COL que seu grid vai funcionar como o esperado.

<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://use.fontawesome.com/releases/v5.7.1/css/all.css" />


  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <div class="cards text-nowrap">
          <div class="row">
            <div class="col-8">
              <p>Lorem, ipsum dolor.</p>
              <p>Lorem, ipsum.</p>
              <i class="fas fa-calendar-alt"></i>
              <p>23/04/2019 - 23/04/2022</p><br>
              <button class="btn-danger mt-3">danger</button>
            </div>
            <div class="col-4">
              <div class="circle">
                <i class="fas fa-shield-alt"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

Dica: Jovem vc precisa dar uma paradinha de 30 min para estudar o Grid do BS, vai te ajudar muito! https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

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 .