The elements of the next row are attached to the previous rowHow to solve it?

Navigation
0

I am showing the products stored in my database (for which I am using laravel 5.6). However, when moving to the next horizontal line, the products are very close to the previous line. How could I make a spacing between one line of elements and the next? I leave you an image to be understood better.

Code 

<div class="col-md-12">
<div class="row">
  <!-- Menu Vertical, Filtros-->
  <div class="col-md-3">
  <div class="container-fluid">
    <div class="list-group border-0 card text-center text-md-left">
     <a href="#menu1" class="list-group-item d-inline-block collapsed" data-toggle="collapse" aria-expanded="false">Categoría</a>
      <div class="collapse" id="menu1" data-parent="#sidebar">
       <a href="#menu1sub1" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 1 </a>
       <a href="#menu1sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">Subitem 2</a>
       <a href="#" class="list-group-item">Subitem 3</a></div>
       <a href="#" class="list-group-item d-inline-block collapsed"><i class="fa fa-film"></i> <span class="d-none d-md-inline">Item 2</span></a>
       <a href="#menu3" class="list-group-item d-inline-block collapsed" data-toggle="collapse" aria-expanded="false"><i class="fa fa-book"></i> <span class="d-none d-md-inline">Item 3 </span></a>
       <div class="collapse" id="menu3" data-parent="#sidebar">
       <a href="#" class="list-group-item" data-parent="#menu3">3.1</a>
       <a href="#menu3sub2" class="list-group-item" data-toggle="collapse" aria-expanded="false">3.2 </a>
       <div class="collapse" id="menu3sub2">
       <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 a</a>
       <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 b</a>
       <a href="#" class="list-group-item" data-parent="#menu3sub2">3.2 c</a>
       </div>
       <a href="#" class="list-group-item" data-parent="#menu3">3.3</a>
       </div>
    </div>
</div>
</div>
  <!-- Fin Menu Vertical, Filtros-->
  <!-- Lista de productos, cuatro filas -->
  <div class="col-md-9">
    @foreach($products->chunk(4) as $productChunk)
    <div class="row">
      @foreach($productChunk as $product)
      <div class="col-md-3">
       <div>
         <img src="{{ $product->imagePath  }}" class="img-thumbnail" style="max-height:249px;">
         <div class="caption">
           <h5 class="fb-responsive">{{ $product->name }}</h5>
           <p>$ {{ $product->price }}</p>
           <div>
           <button type="button" class="btn btn-primary btn-sm" style="width:100%;">Agregar a tu Compra</button>
         </div>
         </div>
       </div>
     </div>
      @endforeach
    </div>
    @endforeach

  </div>
  </div>
  <!-- Fin de Lista de productos, cuatro filas -->
 </div>
</div>
    
asked by Kvothe_0077 09.04.2018 в 22:10
source

1 answer

0

Can you do it in the following way just by adding the class mb-3 , what does it mean? It means make Margin bottom Example 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="col">
    
    <div class="card mb-3" style="width: 18rem;">
      <img class="card-img-top" src="" alt="Card image cap">
      <div class="card-body">
        <p class="card-text">

        </p>
      </div>
    </div>
    
    <div class="card mb-3" style="width: 18rem;">
      <img class="card-img-top" src="" alt="Card image cap">
      <div class="card-body">
        <p class="card-text">

        </p>
      </div>
    </div>
    
  </div>
</div>

That makes them separate at the bottom, but to make it clearer later on if you want to make margins, bootstrap is very intuitive, just think how you would abbreviate it: For example margin top just follow the logic

mt-3 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="col">
    
    <div class="card mt-5" style="width: 18rem;">
      <img class="card-img-top" src="" alt="Card image cap">
      <div class="card-body">
        <p class="card-text">

        </p>
      </div>
    </div>
    
    <div class="card mt-2" style="width: 18rem;">
      <img class="card-img-top" src="" alt="Card image cap">
      <div class="card-body">
        <p class="card-text">

        </p>
      </div>
    </div>
    
  </div>
</div>

Notice, likewise with others, both with padding and marging . I just wanted to explain it so that it would be clear.

    
answered by 09.04.2018 / 22:53
source
Join two models in asp.net mvc 5 c # - N CAPAS Help in Cordova