嗨,我想以水平方式显示这些列,但以垂直方式显示,因为我可以更改它;
刀片文件:
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
@foreach($category->products as $pro_data)
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
@endforeach
<!-- / Input & Button Groups -->
</div>
答案 0 :(得分:0)
如果我对您的理解是正确的,则您尝试水平显示彼此相邻的类别的产品,但此刻您正在垂直查看它们。
我认为适当的方法可以将foreach与您的
<div class="col-lg-3 mb-4"></div>
赋予了我们
<div class="row">
@foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</div>
</div>
@endforeach
</div>
希望有帮助!
答案 1 :(得分:0)
@foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
@endforeach
希望这将适用。
答案 2 :(得分:0)
我将使用一些填充将div浮动到左侧,并在需要时使用clearfix。
答案 3 :(得分:0)
所有卡片都以水平方式出现,因为在没有.row
类的情况下,您可能不会将它们全部包裹起来
因为一组CSS属性应用于.row
类
尝试以下方法:
<div class="row">
<div class="col-lg-3 mb-4">
</div>
</div>
答案 4 :(得分:0)
您的代码应该是这样的。在循环内添加了row
包装器和col
。我假设<div class="col-lg-3 mb-4">
是所有卡片的存放容器。
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="row">
@foreach($category->products as $pro_data)
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
@endforeach
<!-- / Input & Button Groups -->
</div><!-- end of row -->
</div>
答案 5 :(得分:0)
在引导程序4中,您可以水平使用列。没有使用.row类,您不会包装它们,这是最重要的类。
这是使用引导程序4的正确方法
<div class="row">
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
</div>
@foreach($category->products as $pro_data)
<div class="row">
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
@endforeach