How to leave objects side-by-side coming from * ngFor?

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

As the above code I have "3" (three) cards side by side, however my problem is when I put the * ngFor as the first card and I would like them to stand side by side using the * ng For no matter how many objects come from the DB. If I take * ngFor and leave the cards with texts any they work, that is, they stay as I want on viwer. Anyone have any ideas?

    
asked by anonymous 04.05.2018 / 16:25

1 answer

1

Bootstrap Layout

Boostrap works with a grid system composed of several lines (% w / o%), which are then composed of columns of varying widths (eg% w / w%), each% w / w of which is 12 units wide. Since your% of% is within a column with a width of 12% (% with%) each% of% will always occupy the total width of .row .

As such, to stay side by side, you would 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 big screen they appear side by side! But what about tablets or mobile phones? It will appear one per line. This has to be with the .col-lg-8 selector in which it will occupy% w /% width units on screens that are Large (> = 992px wide) - 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 it is in the same .row , if the sum of the elements does not   the 12, Bootstrap continues to put the elements down.

Angular Solution

Considering this, the simplest thing is to make .card within your .col-lg-12 with the width of the card you want and let Bootstrap handle 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>
  

Please note that the vertical spacing may not be good, so in your .card would add a margin to make sure they would be fine without changing .row . >

    
04.05.2018 / 16:51
Error executing spring security $ _session [''] = array ()