如何增加Bootstrap卡的宽度和间距

Question

我已经制作了出现在两个不同页面上的bootstrap卡片。一个在登陆页面上，我想增加的spacing和一个在图书页面上，我想增加卡的width。下面是我在两个页面中编写和使用的代码。我唯一更改的是第6行，从‘...col lg-3’改为‘...col lg-2’。如果有谁可以帮助我增加卡片的间距和间距，如果可以的话，请帮助我。当我使用col lg-3时，d-flex justify content-平均不起作用。

 <section id="about" class="ts-block" >
               <div id="cards_landscape_wrap-2">
    <div class="container " style="width:70%">
        <div class="row d-flex justify-content-around">
        @foreach($products as $product)
            <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
                <a href="{{route("products.show",$product->slug)}}">
                    <div class="card-flyer ">
                        <div class="text-box">
                            <div class="image-box">
                                <img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
                            </div>
                            <div class="card-footer">
                                        <i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
                                        <span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
                                        <span class="mybuttonoverlap btn btn-primary">View</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
   </div>
        </section>        

Answer 1

尝试包含包含卡的直接父级的d-flex justify-content-around，而不是<div class="row d-flex justify-content-around">。并将保证金添加到卡片上。

<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 d-flex justify-content-around">
                <a href="{{route("products.show",$product->slug)}}">
                    <div class="card-flyer m-2">
                        <div class="text-box">
                            <div class="image-box">
                                <img src="{{asset($product->image)}}" alt="{{$product->title}}" class="img-fluid rounded mx-auto d-block" width="100%"/>
                            </div>
                            <div class="card-footer">
                                        <i class="text-muted"><strike>Ksh.{{$product->old_price}}</strike></i>
                                        <span class="text-primary font-weight-bold">Ksh.{{$product->price}}</span><br>
                                        <span class="mybuttonoverlap btn btn-primary">View</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div