如何创建一个上面一列下面两列的引导网格?
Posted
技术标签:
【中文标题】如何创建一个上面一列下面两列的引导网格?【英文标题】:How create a bootstrap grid with one column above and two below? 【发布时间】:2019-10-24 12:01:49 【问题描述】:我的问题是:如何在桌面版上转换具有三列的引导网格,在移动版上在一列上方和两列下方?
我已经尝试了很多东西都没有成功...
【问题讨论】:
请展示您的尝试! 现在是巴西凌晨 1 点,早上我到办公室时可以发布代码...谢谢。 【参考方案1】:你可以试试这个:
<div class="row">
<div class="col-md-4 col-sm-12 col-xs-12"></div>
<div class="col-md-4 col-sm-6 col-xs-6"></div>
<div class="col-md-4 col-sm-6 col-xs-6"></div>
</div>
阅读更多关于Bootstrap grid
【讨论】:
【参考方案2】:手机屏幕变化col-6
最后两个div和第一个是col-12
,
col-xs-*
已被删除 Bootstrap 4
以支持 col-*
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 text-center">
<p>1</p>
</div>
<div class="col-6 col-sm-4 text-center">
<p>2</p>
</div>
<div class="col-6 col-sm-4 text-center">
<p>3</p>
</div>
</div>
</div>
【讨论】:
【参考方案3】:它用于引导程序 4
<div class="container">
<div class="row">
<div class="col-12 col-sm-12 col-md-4">Box 1</div>
<div class="col-6 col-sm-6 col-md-4">Box 2</div>
<div class="col-6 col-sm-6 col-md-4">Box 3</div>
</div>
</div>
【讨论】:
【参考方案4】:<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4">Box1</div>
<div class="col-xs-6 col-sm-4 col-md-4">Box2</div>
<div class="col-xs-6 col-sm-4 col-md-4">Box3</div>
</div>
</div>
说明:
Bootstrap 允许在一个页面中最多包含 12 列。
这里对于像手机这样的 XS 设备,按钮/小部件应该占据所有 12 个网格,因此每行只有 1 个按钮/小部件,因此col-xs-12
。
由于桌面可以是中型设备,因此 3 小部件/按钮应跨越整个页面,因此值为 col-md-4
。
希望这会有所帮助。
【讨论】:
【参考方案5】:<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-4 text-center">
<h1>1</h1>
</div>
<div class="col-6 col-sm-4 text-center">
<h1>2</h1>
</div>
<div class="col-6 col-sm-4 text-center">
<h1>3</h1>
</div>
</div>
</div>
</body>
</html>
阅读更多关于 bootstrap 4 网格系统的信息
bootstrap 4 grid system
【讨论】:
以上是关于如何创建一个上面一列下面两列的引导网格?的主要内容,如果未能解决你的问题,请参考以下文章