我的 Bootstrap 4 响应式列布局不起作用 [英] My Bootstrap 4 responsive column layout not working

查看：23
本文介绍了我的 Bootstrap 4 响应式列布局不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

所以我使用 Bootstrap 4 制作了一个非常简单的响应式网站布局，所以根据代码，当它进入平板电脑模式时，列数应该变为 4，即当视口为 768px 宽而我的可以显示 4 列时，最多 770px 但当它变成 769px 时，它会切换到智能手机模式并占据整个宽度并相互堆叠.

<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">上校
<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">上校

<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">上校

<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">上校

<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">上校

<div class="col-lg-2 col-md-3 col-sm-12" style="background-color:red;">上校

解决方案

与 Bootstrap 3 不同，Bootstrap 4 有一点不同 网格系统.这里 sm 从 <768px 开始起作用.而 xs 断点现在只是 col.在这里，稍微改写一下.

<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="容器"><div class="row"><div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">上校

<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">上校

<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">上校

<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">上校

<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">上校

<div class="col-lg-2 col-sm-3 col-12" style="background-color:red;">上校

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>

解决方案

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆