<分区>
<分区>
我正在使用
<div class="col-sm-6 col-xs-12">
在所有大于 xs 的屏幕上有 2 列。
但是，我想设置断点，当屏幕宽度介于 xs 和 sm 之间时，我开始有 2 列。
我应该使用@media 查询吗？如果是这样，我该怎么做？
它用于投资组合页面，用户可以在其中单击图像以查看不同的元素。
这是我到目前为止写的:
<section class="container-fluid" id="portfolio">
<h1>PORTFOLIO</h1>
<div class="row">
<div class="col-sm-6 col-xs-12">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
<div class="col-sm-6 col-xs-12">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
<div class="col-sm-6 col-xs-12">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
<div class="col-sm-6 col-xs-12">
<img src="#" alt="#" width="100%">
<p>Me</p>
</div>
</div>
</section>
非常感谢帮助!
最佳答案
尝试这样的事情:
@media all and (max-width: 500px) and (min-width: 300px){
.col-md-6 {
width: 75% !important;
}
.col-xs-12 {
width: 75% !important;
}
}
或者创建另一个类，比如.custom-breakpoint，然后添加它:
@media all and (max-width: 500px) and (min-width: 300px){
.custom-breakpoint {
width: 75% !important;
}
}
我不确定这些是否可行，但使用媒体查询看起来像那些。 !important 是为了优先于 Bootstrap 自己的 col-md-6 和 col-xs-12
关于css - 如何根据屏幕大小设置列数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42714840/