我的Bootstrap 4响应式列布局不起作用 [英] My Bootstrap 4 responsive column layout not working
问题描述
因此,我使用Bootstrap 4创建了一个非常简单的响应式网站布局,因此根据代码,当它进入平板电脑模式时,列数应变为4,即,当视口为768px宽,而我的显示尺寸为770px时则显示4列,但当它变为769px时,它将切换到智能手机模式,并采用整个宽度并将其堆叠在一起.
So I made a very simple responsive website layout using Bootstrap 4 so according to the code the no of columns should become 4 when it enters tablet mode ie when the viewport is 768px wide while mine is fine up to 770px showing 4 columns but when it becomes 769px it switches into smartphone mode and take the entire width and stacks on top of each other.
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">
col
</div>
</div>
推荐答案
与Bootstrap 3不同,Bootstrap 4具有一些不同的
Unlike Bootstrap 3, Bootstrap 4 has a bit different grid system. Here sm
starts to act since <768px. and the xs
breakpoint now is just col
. Here, rewritten a bit.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
col
</div>
<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">
col
</div>
</div>
</div>
这篇关于我的Bootstrap 4响应式列布局不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!