- 首页
- 前端开发
- Bootstrap CSS - 调整大小时第 2 列下的第 3 列
Bootstrap CSS - 调整大小时第 2 列下的第 3 列
[英] Bootstrap CSS - Column 3 under Column 2 on resizing
本文介绍了Bootstrap CSS - 调整大小时第 2 列下的第 3 列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我拥有的示例 HTML 页面.在调整大小时，我需要先在 Column2 下显示 Column3，在进一步减小屏幕宽度时，在 Column1 下的 Column2 下显示 Column3.
Column1 Column2 Column3
调整第 1 阶段的大小(平板电脑宽度)
Column1 Column2第 3 列
进一步调整大小(移动设备宽度)
Column1第 2 列第 3 列
我当前的代码:
<头><title>引导程序示例</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><身体><div class="jumbotron text-center"><h1>我的第一个引导页面</h1><p>调整此响应式页面的大小以查看效果！</p>
<div class="容器"><div class="row"><div class="col-sm-4"><h3>第1列</h3><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英...</p><p>Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris...</p>
<div class="col-sm-4"><h3>第2列</h3><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英...</p><p>Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris...</p>
<div class="col-sm-4"><h3>第3列</h3><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英...</p><p>Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris...</p>
</html>
解决方案
要实现这样的事情你应该使用offset.offset 属性将使用您想要的设置推送或拉取元素.
如何处理?
为了得到你想要的东西，你应该把你的断点分成 3 个主要的断点(所以我只用了 md, sm, xs> 哪些是 bootstrap 3.4 中的主要内容).然后我通过确定每列的 col-md-4 告诉引导程序我想要连续 3 列.然后我告诉他们，当窗口宽度很小时，我希望他们每个人都用 col-xs-12 填满一整行.棘手的是告诉引导程序，我希望在小型设备(不是超小型 xs)中的每一行中有 2 列，所以我选择了 col-sm-6.然后我必须指定我想将我的第三列推送到一整列然后我使用 col-sm-offset-6 然后确保 offset 会'下一个断点需要很长时间我刚刚声明了这个一二 col-md-offset-0 以确保中型设备 (md) 中的偏移量为零.
所以你的最终代码应该是这样的:
<头><title>引导程序示例</title><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><身体><div class="jumbotron text-center"><h1>我的第一个引导页面</h1><p>调整此响应式页面的大小以查看效果！</p>
<div class="容器"><div class="row"><div class="col-md-4 col-sm-6 col-xs-12"><h3>第1列</h3><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英...</p><p>Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris...</p>
<div class="col-md-4 col-sm-6 col-xs-12"><h3>第2列</h3><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英...</p><p>Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris...</p>
<div class="col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-6 col-xs-12"><h3>第3列</h3><p>Lorem ipsum dolor sat amet, consectetur adipisicing 精英...</p><p>Ut enim ad minim veniam, quis nostrud exeritation ullamco Laboris...</p>
</html>
注意:您可以阅读更多关于 offset 这里.
This is the sample HTML page I have. On resizing, I have a requirement to display Column3 under Column2 first and on reducing screen width further, display Column3 under Column2 under Column1.
Column1 Column2 Column3
On resizing stage 1 (tablet width)
Column1 Column2
Column3
On resizing further (mobile width)
Column1
Column2
Column3
My current code:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
解决方案
To achieve such a thing you should use offset. The offset attribute will push or pull elements with your desired settings.
How to deal with it?
In order to get what you wanted you should divide your breakpoints into 3 major ones (So I just went with md, sm, xs which are the major ones in bootstrap 3.4). Then I told the bootstrap I want 3 columns in a row by determining col-md-4 for each column. Then I told them I want each of them to fill a whole row when the window width is small with col-xs-12. The tricky one was telling bootstrap that I want 2 columns in each row in small devices (not extra-small xs), so I went with col-sm-6. Then I have to specify I want to push my third column for one whole column then I went with col-sm-offset-6 and then to make sure the offset won't take long for next breakpoint I just declared this one-two col-md-offset-0 to make sure offset in medium devices (md) is none.
So your final code should be something like this:
<html lang="en">
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-md-offset-0 col-sm-6 col-sm-offset-6 col-xs-12">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
NOTE: You can read more about offset here.
这篇关于Bootstrap CSS - 调整大小时第 2 列下的第 3 列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
