- 首页
- 前端开发
- laravel bootstrap-如何使用媒体查询来对齐每行两个项目?
laravel bootstrap-如何使用媒体查询来对齐每行两个项目?
[英] laravel bootstrap- how to use media query to align two items per row?
本文介绍了laravel bootstrap-如何使用媒体查询来对齐每行两个项目?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个显示待售商品列表的查询页面.如下所示:
看起来不错,但是当我更改为较小的视口或移动布局时,项目会彼此靠近堆叠并且不对齐.
我的代码:
@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>
<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="容器"><div class="row"><!-- 选项/建议--><div class="col-md-3 col-sm-12 hidden-sm" style="border: 1px solid #e5e5e5; padding: 10px; right:33%; bottom: 220px; "><!-- 相关分类--><ul class="list-group"><li class="list-group-item"><ul class="list-group">@foreach ($allCategories 作为 $relatedCategory)<li class="list-group-item"><a class="text-capitalize" style="font-weight: 520;"href="/shop/category/{{ $relatedCategory->slug }}">{{ $relatedCategory->name }}</a>@if($relatedCategory->id == $category->id)<ul class="list-group">@foreach($category->subcategories as $childCategory)<li class="list-group-item"><a class="text-capitalize" style="font-weight: 490;"href="/shop/category/{{ $category->slug }}/{{ $childCategory->slug }}">{{ $childCategory->name }}</a>@if($childCategory->id == $subcategory->id)<ul class="list-group">@foreach($subcategory->types as $childType)<li class="list-group-item"><a class="text-capitalize" style="font-weight: 400;"href="/shop/category/{{ $category->slug }}/{{ $childCategory->slug }}/{{ $childType->slug }}">{{ $childType->姓名}}</a>@endforeach@万一@endforeach<br>@万一@endforeach<br><ul><strong>价格</strong><li>低于 RM25 </li><li>RM 25 到 RM 50 </li><li>RM50 到 RM100 </li><li>RM100 到 RM200 </li><li>RM200 &上面</li><input type="number" placeholder="Min" id="quantity" name="quantity" min="1" max="300"><input type="number" placeholder="Max" id="quantity" name="quantity" min="1" max="300"><br><ul><strong>颜色</strong><li><input type="checkbox" id="white" name="white" value="white"><label for="white">WHITE</label></li><br><li><input type="checkbox" id="beige" name="beige" value="beige"><label for="beige">BEIGE</label></li><br><li><input type="checkbox" id="red" name="red" value="red"><label for="red">RED</label></li><br><li><input type="checkbox" id="maroon" name="maroon" value="maroon"><label for="beige">MAROON</label></li><br><li><input type="checkbox" id="grey" name="grey" value="grey"><label for="grey">GREY</label></li><br><li><input type="checkbox" id="black" name="black" value="black"><label for="black">BLACK</label></li><br><ul><strong>评级</strong><li><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><li><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star"></span>及以上<li><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>及以上<li><span class="fa fa-star 检查"></span><span class="fa fa-star 检查"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>及以上<li><span class="fa fa-star 检查"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span>及以上
我想我需要对 col-3
应用一些 CSS 媒体,但我不知道调整的确切方法,因此它在移动布局上每行显示 2 个项目.有没有办法做到这一点?
@endsection
解决方案
这个例子很可能会为你工作.我使用了您的原始标记,去除了一些视觉干扰并从 CDN 添加了 Bootstrap 样式.
变化是:
col-md-3 col-sm-4 col-6
带有图像的列的类;- 删除了图像内嵌样式中的硬编码高度;
- 在下面添加了一些新样式,包括媒体查询.
div.dropdown button.btn-default.round-background img {背景颜色:橙色;高度:90%;}div.dropdown button.btn-default.round-background {宽度:100%;高度:150px;}@media only screen and (max-width: 380px) {div.dropdown button.btn-default.round-background img {宽度:100%;高度:自动;}}
I have a query page that displays a list of item for sale. It looks like below:
It looks fine but when I changed to a smaller viewport or mobile layout, the items get stacked close to one another and it is out of alignment.
My code:
@section('content')
<style>
.checked {
color: orange;
}
@media only screen and (max-width: 500px) {
.col-3{
// some adjustment code to display 2 items per row on mobile
}
</style>
<div>
{{ Breadcrumbs::render('shop.category.subcategory', $category, $subcategory) }}
<div class="container">
<div class="row">
<div class="col-3">
<div class="dropdown">
<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>Bed Sheet</strong></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
</ul>
</div>
</div>
<div class="col-3">
<div class="dropdown">
<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>Curtain</strong> </span>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
</ul>
</div>
</div>
<div class="col-3">
<div class="dropdown">
<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>Curtain</strong> </span>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
</ul>
</div>
</div>
<div class="col-3">
<div class="dropdown">
<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>Curtain</strong> </span>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 1</a></li><hr>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 2</a></li><hr>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 3</a></li><hr>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sub Item 4</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!-- Options / Recommendation -->
<div class="col-md-3 col-sm-12 hidden-sm" style="border: 1px solid #e5e5e5; padding: 10px; right:33%; bottom: 220px; ">
<!-- Related Categories -->
<ul class="list-group">
<li class="list-group-item">
<ul class="list-group">
@foreach ($allCategories as $relatedCategory)
<li class="list-group-item">
<a class="text-capitalize" style="font-weight: 520;" href="/shop/category/{{ $relatedCategory->slug }}">{{ $relatedCategory->name }}</a>
@if($relatedCategory->id == $category->id)
<ul class="list-group">
@foreach($category->subcategories as $childCategory)
<li class="list-group-item">
<a class="text-capitalize" style="font-weight: 490;" href="/shop/category/{{ $category->slug }}/{{ $childCategory->slug }}">{{ $childCategory->name }}</a>
@if($childCategory->id == $subcategory->id)
<ul class="list-group">
@foreach($subcategory->types as $childType)
<li class="list-group-item">
<a class="text-capitalize" style="font-weight: 400;" href="/shop/category/{{ $category->slug }}/{{ $childCategory->slug }}/{{ $childType->slug }}">{{ $childType->name }}</a>
</li>
@endforeach
</ul>
@endif
</li>
@endforeach
</ul> <br>
@endif
</li>
@endforeach
</ul> <br>
<ul>
<strong>PRICE</strong>
<li>Under RM25 </li>
<li>RM 25 to RM 50 </li>
<li>RM50 to RM100 </li>
<li>RM100 to RM200 </li>
<li>RM200 & Above </li>
<input type="number" placeholder="Min" id="quantity" name="quantity" min="1" max="300">
<input type="number" placeholder="Max" id="quantity" name="quantity" min="1" max="300">
</ul> <br>
<ul>
<strong>COLOR</strong>
<li><input type="checkbox" id="white" name="white" value="white">
<label for="white">WHITE</label>
</li><br>
<li><input type="checkbox" id="beige" name="beige" value="beige">
<label for="beige">BEIGE</label>
</li><br>
<li><input type="checkbox" id="red" name="red" value="red">
<label for="red">RED</label>
</li><br>
<li><input type="checkbox" id="maroon" name="maroon" value="maroon">
<label for="beige">MAROON</label>
</li><br>
<li><input type="checkbox" id="grey" name="grey" value="grey">
<label for="grey">GREY</label>
</li><br>
<li><input type="checkbox" id="black" name="black" value="black">
<label for="black">BLACK</label>
</li><br>
</ul>
<ul>
<strong>RATINGS</strong>
<li>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
</li>
<li>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
and up
</li>
<li>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star "></span>
<span class="fa fa-star"></span>
and up
</li>
<li>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star"></span>
and up
</li>
<li>
<span class="fa fa-star checked"></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star "></span>
<span class="fa fa-star"></span>
and up
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I figured I need to apply some CSS media to col-3
but I do not know the exact way to adjust so it shows 2 items per row on a mobile layout. Is there a way to do this?
</div>
@endsection
解决方案
This example is likely will work for you. I used your original markup, removed some visual noise and added Bootstrap styles from CDN.
The changes are:
col-md-3 col-sm-4 col-6
classes for your columns with images;
- removed hardcoded height inside inline styles for your images;
- addes some new styles below including media-query.
div.dropdown button.btn-default.round-background img {
background-color: orange;
height: 90%;
}
div.dropdown button.btn-default.round-background {
width: 100%;
height: 150px;
}
@media only screen and (max-width: 380px) {
div.dropdown button.btn-default.round-background img {
width: 100%;
height: auto;
}
}
这篇关于laravel bootstrap-如何使用媒体查询来对齐每行两个项目?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文