0

Eu tenho essa situação:

<div class="row">
  <div class="col-lg-12">
    <!-- 1 Primeiro cartão, 1° objeto -->
    <div class="card borda-card" *ngFor="let evento of eventos">
      <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a>
      <div class="card-body">
        <p>
          <b>{{ evento.titulo }}</b>
        </p>
        <p class="data-card">{{ evento.data }}</p>
        <p>{{ evento.descricao }}</p>
        <a href="#" class="btn-mais-card">Saiba mais</a>
      </div>
    </div>       
  </div>      
  <!-- 2 Segundo cartão, 2° objeto -->
  <!-- 3 Terceiro cartão, 3° objeto -->     
</div>

Conforme o código acima eu possuo "3" (três) cartões um do lado do outro, porém meu problema é quando eu coloco o *ngFor conforme o primeiro cartão e eu gostaria que eles ficassem um do lado do outro usando o *ngFor independente de quantos objetos venham do BD. Se eu tirar *ngFor e deixar os cartões com textos quaisquer eles funcionam, ou seja, ficam conforme eu quero na viwer. Alguém tem alguma ideia?

4
  • vc esta usando a class="col-lg-12" e ela ocupa toda a extensão da tela
    – Wees Smith
    4/05/2018 às 14:38
  • Sim, uso ela dentro de uma class="row" acho que é o certo! 4/05/2018 às 14:41
  • porém quando vc abre os 3 cartões, fica um embaixo do outro
    – Wees Smith
    4/05/2018 às 14:42
  • Sim usando o *ngFor sim, mas se eu tirar ele ai fica certo. Cara se eu achei a solução qual a melhor forma de eu sair desse sem perder meus pontinhos? :( 4/05/2018 às 14:46

1 Resposta 1

2

Layout de Bootstrap

O Boostrap funciona com um sistema de grelhas compostas por diversas linhas (.row) que depois são compostas por colunas de larguras variadas (ex.: .col-lg-8) sendo que cada .row tem 12 unidades de largura. Como o seu .card está dentro de uma coluna com 12 de largura (.col-lg-12) cada .card ocupará sempre a largura total da .row.

Como tal, para ficarem lado a lado, teria de ter algo como:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

<div class="row">

  <!-- 1 Primeiro cartão, 1° objeto -->
  <div class="col-lg-4">
    <div class="card borda-card" *ngFor="let evento of eventos">
      <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a>
      <div class="card-body">
        <p>
          <b>{{ evento.titulo }}</b>
        </p>
        <p class="data-card">{{ evento.data }}</p>
        <p>{{ evento.descricao }}</p>
        <a href="#" class="btn-mais-card">Saiba mais</a>
      </div>
    </div>       
  </div> 
  
  <!-- 2 Segundo cartão, 2° objeto -->
    <div class="col-lg-4">
    <div class="card borda-card" *ngFor="let evento of eventos">
      <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a>
      <div class="card-body">
        <p>
          <b>{{ evento.titulo }}</b>
        </p>
        <p class="data-card">{{ evento.data }}</p>
        <p>{{ evento.descricao }}</p>
        <a href="#" class="btn-mais-card">Saiba mais</a>
      </div>
    </div>       
  </div> 
  
  <!-- 3 Terceiro cartão, 3° objeto -->
    <div class="col-lg-4">
    <div class="card borda-card" *ngFor="let evento of eventos">
      <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a>
      <div class="card-body">
        <p>
          <b>{{ evento.titulo }}</b>
        </p>
        <p class="data-card">{{ evento.data }}</p>
        <p>{{ evento.descricao }}</p>
        <a href="#" class="btn-mais-card">Saiba mais</a>
      </div>
    </div>       
  </div> 
  
</div>


Potencial problema do layout

Ótimo! Agora se abrirmos num ecrã grande aparecem lado a lado! Mas e em tablets ou telemóveis? Irá aparecer uma por linha. Isto tem a haver com o seletor .col-lg-n em que ocupará n unidades de largura em ecrãs que sejam do tipo Large (>= 992px de largura) - mais informação sobre isso aqui.

Um exemplo em que ele mostraria sempre 3 itens por linha:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

    <div class="row">

      <!-- 1 Primeiro cartão, 1° objeto -->
      <div class="col-xs-4">
        <div class="card borda-card" *ngFor="let evento of eventos">
          <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a>
          <div class="card-body">
            <p>
              <b>{{ evento.titulo }}</b>
            </p>
            <p class="data-card">{{ evento.data }}</p>
            <p>{{ evento.descricao }}</p>
            <a href="#" class="btn-mais-card">Saiba mais</a>
          </div>
        </div>       
      </div> 
      
      <!-- 2 Segundo cartão, 2° objeto -->
        <div class="col-xs-4">
        <div class="card borda-card" *ngFor="let evento of eventos">
          <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a>
          <div class="card-body">
            <p>
              <b>{{ evento.titulo }}</b>
            </p>
            <p class="data-card">{{ evento.data }}</p>
            <p>{{ evento.descricao }}</p>
            <a href="#" class="btn-mais-card">Saiba mais</a>
          </div>
        </div>       
      </div> 
      
      <!-- 3 Terceiro cartão, 3° objeto -->
        <div class="col-xs-4">
        <div class="card borda-card" *ngFor="let evento of eventos">
          <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a>
          <div class="card-body">
            <p>
              <b>{{ evento.titulo }}</b>
            </p>
            <p class="data-card">{{ evento.data }}</p>
            <p>{{ evento.descricao }}</p>
            <a href="#" class="btn-mais-card">Saiba mais</a>
          </div>
        </div>       
      </div> 
      
    </div>

Nota: mesmo estando na mesma .row, se a soma dos elementos não der os 12, o Bootstrap continua a colocar os elementos em baixo.


Solução com o Angular

Tendo em conta isto, o mais simple será fazer o *ngFor* dentro da sua .row com a largura do cartão que queira e deixar o Bootstrap tratar do resto:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


<div class="row">

<div class="card borda-card" *ngFor="let evento of eventos">
  <div class="col-xs-4">
    <!-- 1 Primeiro cartão, 1° objeto -->
      <a href="/assets/img/2.jpg" style="background-image: url('../../assets/img/2.jpg')" class="imagem-card" data-lightbox="2.jpg"></a>
      <div class="card-body">
        <p>
          <b>{{ evento.titulo }}</b>
        </p>
        <p class="data-card">{{ evento.data }}</p>
        <p>{{ evento.descricao }}</p>
        <a href="#" class="btn-mais-card">Saiba mais</a>
      </div>
    </div>       
  </div>          
</div>

Tenha em atenção que o espaçamento vertical pode não ficar bem, por isso na sua .borda-card acrescentaria uma margem para ter a certeza que eles ficariam bem sem trocar de .row.

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 .