javascript - Bootstrap 4 网格系统错误

标签 javascript html css bootstrap-4 grid-system

<分区>

开始学习 Bootstrap 4 和响应式网格系统。下面的代码是我的html。调整窗口大小时，所有列都可以正常工作，直到我达到 xs 屏幕尺寸，并且所有列自动跨越 12，而不是像我尝试做的那样跨越 4-4-4。尝试在线搜索，但似乎无法在任何地方找到答案。帮助表示赞赏。我已经添加了结束 html 标记，但由于某种原因它没有显示。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

            <div class="container">
                <div class="row">
                <div class="col-xs-4 col-sm-8 col-md-12 col-lg-4 box1">1</div>
                <div class="col-xs-4 col-sm-2 col-md-6 col-lg-4 box2">2</div>
                <div class="col-xs-4 col-sm-2 col-md-6 col-lg-4 box3">3</div>
                </div>
            </div>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-
        KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
        <script 
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper
        .min.js" integrity="sha384-
        ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
        crossorigin="anonymous"></script>
        <script 
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.
        js" integrity="sha384-
        JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
        crossorigin="anonymous"></script>

最佳答案

在 bootstrap 4 中没有 col-xs，取而代之的是你需要放一个 col-4 https://getbootstrap.com/docs/4.0/layout/grid/

关于javascript - Bootstrap 4 网格系统错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48662010/

上一篇：html - 如何在侧边栏切换时响应页面内容？

下一篇：html - CSS3 diaporama，如何让变化渐变？

javascript - for循环无效字符javascript

html - 在 Bootstrap 中滚动期间未出现“事件”

javascript - 当我在 img 标签周围添加链接时，将元素居中对齐在 img 元素上不起作用

html - 如何删除元素中的文本但显示其子元素

javascript - 纳肖恩JS : execute AST string?

javascript - 验证时间范围内

javascript - 单击按钮后，无法禁用另一个按钮

javascript - 通过 WebService API 为特定父项目的 Rally Portfolio 项目自定义网格查询语法

java - 使用 jsoup 从带中断的表格中提取文本