編輯模板bootstrap在行中顯示4個產品圖像

Question

我正在用laravel5.2開發我的應用程序。我有bootstrap模板，並希望在每行顯示4個產品及其圖片。 這是我的模板

@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 

它不是在時間和2在行disciplined.it顯示4時。請幫助我做到這一點。

Answer 1

爲了有嵌套列（4分* x列SM-3列SM-9中），你需要用一排4列，使之成爲

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

Answer 2

我想你應該檢查這個視頻https://www.youtube.com/watch?v=lIEcyOUcNQk