How do you leave objects side-by-side coming from *ngFor?

Asked

Viewed 642 times

0

I have this situation:

<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>

According to the above code I have "3" (three) cards next to each other, but my problem is when I put *ngFor according to the first card and I would like them to stay next to each other using *ngFor regardless of how many objects come from the BD. If I take *ngFor and leave the cards with any text they work, ie, stay as I want on viwer. Anyone have any idea?

html twitter-bootstrap angular twitter angular-cli

  • you’re using the class="col-lg-12" and it takes up the entire length of the screen

  • Yes, I use it inside a class="row" I think it’s right!

  • but when you open the 3 cards, it’s under each other

  • Yes using *ngFor yes, but if I take it off it is right there. Dude if I found the solution which the best way for me to get out of this without losing my dots? :(

1 answer

2


Layout of Bootstrap

The Boostrap works with a grid system composed of several lines (.row) which are then composed of columns of varying widths (ex.: .col-lg-8) each of which .row has 12 units wide. Like your .card is inside a 12 wide column (.col-lg-12) each .card shall always occupy the total width of the .row.

So to stand side by side, you’d have to have something like: 

<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>

Potential layout problem

Great! Now if we open on a large screen they appear side by side! But what about on tablets or mobile phones? One will appear per line. This has to do with the dial .col-lg-n in which will occupy n width units in screens of type Large (>= 992px width) - more information about this here.

An example where it would always show 3 items per line:

    <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>

Note: even though I’m in the same .row, if the sum of the items does not give the 12, Bootstrap continues to put the elements below.

Solution with the Angular

In view of this, the simplest will be to do the *ngFor* within your .row the width of the card you want and let Bootstrap take care of the rest:

<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>

Pay attention to vertical spacing may not be right, so in your .borda-card would add a margin to make sure they would be fine without changing .row.

Browser other questions tagged html twitter-bootstrap angular twitter angular-cli

You are not signed in. Login or sign up in order to post.