laravel bootstrap-如何使用媒体查询来对齐每行两个项目? [英] laravel bootstrap- how to use media query to align two items per row?

问题描述

我有一个显示待售商品列表的查询页面.如下所示:

看起来不错，但是当我更改为较小的视口或移动布局时，项目会彼此靠近堆叠并且不对齐.

我的代码:

@section('内容')<风格>.checked {颜色为橙色;}@media only screen and (max-width: 500px) {.col-3{//一些调整代码以在移动设备上每行显示 2 个项目}</风格><div>{{ Breadcrumbs::render('shop.category.subcategory', $category, $subcategory) }}<div class="容器"><div class="row"><div class="col-3"><div class="下拉菜单"><button class="btn btn-default round-background" type="button" id="menu1" data-toggle="dropdown"><img src="{{asset('images/bedsheet.jpg')}}" style=" border-radius: 50%; height: 150px; "></button><hr><span class="text-capitalize"><strong>床单</strong></span><ul class="dropdown-menu" role="menu" aria-labelledby="menu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目1</a></li><hr><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目2</a></li><hr><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目3</a></li><hr><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目4</a></li>

<div class="col-3"><div class="下拉菜单"><button class="btn btn-default round-background" type="button" id="menu1" data-toggle="dropdown"><img src="{{asset('images/curtain.jpg')}}" style=" border-radius: 50%; height: 150px;"></button><hr><span class="text-capitalize"><strong>窗帘</strong></span><ul class="dropdown-menu" role="menu" aria-labelledby="menu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目1</a></li><hr><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目2</a></li><hr><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目3</a></li><hr><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目4</a></li>

<div class="col-3"><div class="下拉菜单"><button class="btn btn-default round-background" type="button" id="menu1" data-toggle="dropdown"><img src="{{asset('images/pink-bed-sheet.jpg')}}" style=" border-radius: 50%; height: 150px;"></button><hr><span class="text-capitalize"><strong>窗帘</strong></span><ul class="dropdown-menu" role="menu" aria-labelledby="menu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目1</a></li><hr><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目2</a></li><hr><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目3</a></li><hr><li role="presentation" class="divider"></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">子项目4</a></li>