bearbeiten Vorlage Bootstrap, um 4 Produktbild Zeile

Question

anzuzeigen Ich entwickle meine Anwendung mit Laravel5.2. Ich habe Vorlage mit Bootstrap und möchten 4 Produkte mit ihren Bildern in jeder Zeile anzeigen. das ist meine Vorlage

@extends('layouts.layout',[['subscribe'=>$subscribe]]) 

@section('content') 
    <section id="advertisement"> 
     <div class="container"> 
      <img src="{{asset('images/shop/advertisement.jpg')}}" alt="" /> 
     </div> 
    </section> 

    <section> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-3"> 
        <div class="left-sidebar"> 
         @include('shared.sidebar',array('brands'=>$brands)) 
        </div> 
       </div> 

       <div class="col-sm-9 padding-right"> 
        <div class="features_items"><!--features_items--> 
         <h2 class="title text-center">Features Items</h2> 
         @foreach ($products as $product) 
          <div class="col-sm-3"> 
           <div class="product-image-wrapper"> 
            <div class="single-products"> 
             <div class="productinfo text-center"> 

               <img src="images/shop/{{$product->image}}" height="200" width="150" alt=""> 
              <h2>{{$product->price}}</h2> 
              <h6><p>{{$product->name}}</p></h6> 


              <a href="{{url('cart')}}" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a> 
              <a href='{{url("products/details/$product->id")}}' class="btn btn-default add-to-cart"><i class="fa fa-info"></i>View Details</a> 
             </div> 
             <div class="product-overlay"> 
              <div class="overlay-content"> 
               <h2>${{$product->price}}</h2> 
               <p>${{$product->name}}</p> 
               <form method="POST" action="{{url('cart')}}"> 
                <input type="hidden" name="product_id" value="{{$product->id}}"> 
                <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
                <button type="submit" class="btn btn-fefault add-to-cart"> 
                 <i class="fa fa-shopping-cart"></i> 
                 Add to cart 
                </button> 
               </form> 
               <a href='{{url("products/details/$product->id")}}' class="btn btn-default add-to-cart"><i class="fa fa-info"></i>View Details</a> 
              </div> 
             </div> 
            </div> 
            <div class="choose"> 
             <ul class="nav nav-pills nav-justified"> 
              <li><a href=""><i class="fa fa-plus-square"></i>Add to wishlist</a></li> 
              <li><a href=""><i class="fa fa-plus-square"></i>Add to compare</a></li> 
             </ul> 
            </div> 
           </div> 
          </div> 
         @endforeach 
         <ul class="pagination"> 
          <li class="active"><a href="">1</a></li> 
          <li><a href="">2</a></li> 
          <li><a href="">3</a></li> 
          <li><a href="">»</a></li> 
         </ul> 
        </div><!--features_items--> 
       </div> 
      </div> 
     </div> 
    </section> 
@endsection 

Es ist nicht Anzeige 4 in Zeile in der Zeit und 2 in der Zeit mich, es zu tun .please helfen disciplined.it wird.

Answer 1

Um verschachtelte Spalten zu haben (4 * x Spalten SM-3 in der Spalte SM-9) können Sie die 4 Spalten in einer Zeile wickeln müssen, so dass es

wird

<div class="col-sm-9"> 
    <div class="row"> 
     @foreach ($products as $product) 
      <div class="col-sm-3"> 
       ... 

Answer 2

Ich glaube, Sie sollten dieses Video ansehen https://www.youtube.com/watch?v=lIEcyOUcNQk