[Vuejs]-How to generate divs contiguos manner and not one bellow another using v-for

by

0👍

I think you need to merge the div that has the v-for with the one that has the col classes:

<div
  v-for="p in products"
  :key="p[0]" 
  class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col-xs-3"
>
  ...

The way it is, you are creating children of a row that are not cols, each one of them containing a col. You could somewhat remedy that by making the divs flex, but you would still lose some formatting.

Have a look at snippet to see the difference:

.row {
  border: 1px solid blue;
}

.quad {
  min-width: 80px;
  height: 80px;
  background: green;
  margin: 4px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">


<h6>Columns in row:</h6>
<div class="container">
  <div class="row">
    <div class="col-3">
      <div class="quad"></div>
    </div>
    <div class="col-3">
      <div class="quad"></div>
    </div>
  </div>
</div>

<h6>Each columns in a div in row (this is what you do atm):</h6>
<div class="container">
  <div class="row">
    <div>
      <div class="col-3">
        <div class="quad"></div>
      </div>
      <div></div>
      <div class="col-3">
        <div class="quad"></div>
      </div>
    </div>
  </div>
</div>
</div>


<h6>Each columns in a div with d-flex in a row:</h6>
<div class="container">
  <div class="row">
    <div class="d-flex">
      <div class="col-3">
        <div class="quad"></div>
      </div>
      <div></div class="d-flex">
      <div class="col-3">
        <div class="quad"></div>
      </div>
    </div>
  </div>
</div>
</div>

Also note that you are using col-l-3, but I think it has to be col-lg-3. If I remember correctly, Bootstrap will still use 3 slots because it is currently the setting on the next smaller screen (i.e. col-sm-3), but still, might be falling you your feet later on…

Leave a comment