Bootstrap 4网格系统错误[重复]
Posted
技术标签:
【中文标题】Bootstrap 4网格系统错误[重复]【英文标题】:Bootstrap 4 Grid System Error [duplicate] 【发布时间】:2018-07-17 15:17:39 【问题描述】:开始学习 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>
【问题讨论】:
【参考方案1】:在 bootstrap 4 中没有 col-xs,取而代之的是你需要放置 col-4 https://getbootstrap.com/docs/4.0/layout/grid/
【讨论】:
太棒了,现在可以使用了。非常感谢!以上是关于Bootstrap 4网格系统错误[重复]的主要内容,如果未能解决你的问题,请参考以下文章
如何将 Angular Flex Layout 与 Bootstrap 4 网格系统进行比较?
可滚动的 div 占用剩余高度(Bootstrap 4 Flexbox 网格系统)