php - 编辑模板 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

它没有纪律。它在时间上显示 4，在时间上显示 2。请帮我做一下。

Answer 1

为了有嵌套的列(列 sm-9 内的 4*x 列 sm-3)，你需要将 4 列换成一行，这样它就变成了

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