css - Bootstrap CSS - 关于调整大小的第 2 列下的第 3 列
问题描述
这是我拥有的示例 HTML 页面。在调整大小时,我需要先在 Column2 下显示 Column3,然后在进一步减小屏幕宽度时,在 Column1 下的 Column2 下显示 Column3。
Column1 Column2 Column3
在调整大小阶段 1(平板电脑宽度)
Column1 Column2
Column3
进一步调整大小(移动宽度)
Column1
Column2
Column3
我当前的代码:
<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>
解决方案
要实现这样的事情,你应该使用offset
. 该offset
属性将使用您想要的设置推送或拉取元素。
如何处理?
为了得到你想要的,你应该把你的断点分成 3 个主要的(所以我只是用md
, sm
,xs
这是bootstrap 3.4中的主要断点)。col-md-4
然后我通过确定每列告诉引导程序我想要连续 3 列。然后我告诉他们,当窗口宽度很小时,我希望他们每个人都填满一整行col-xs-12
。棘手的是告诉 bootstrap 我希望小型设备的每一行中有 2 列(不是 extra-small xs
),所以我选择了col-sm-6
. 然后我必须指定我想为一整列推送我的第三列,然后我继续,col-sm-offset-6
然后确保offset
下一个断点不会花费很长时间,我刚刚声明了这个一二col-md-offset-0
以确保在中型设备中偏移(md
) 没有。
所以你的最终代码应该是这样的:
<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>
注意:您可以offset
在此处阅读更多信息。
推荐阅读
- html - 表格的 CSS 在 Outlook 2016 中不起作用
- laravel - 按 Laravel 过去 24 小时内的关系计数排序?
- reactive-programming - 在反应流扫描(),原子等中保持状态的有效方法?
- c# - 当 tag = "number" 使用 C# 时,如何从别名中获取 "Some text"?
- c# - 尝试将字符串条目解析为双精度,但小数点永远无法识别
- data-structures - No of Islands 问题的时间复杂度
- javascript - 是否有任何其他选项可以在 ec2 实例上运行多个节点应用程序
- android - 如何在Android中进行连续语音识别,即使手机被锁定也能运行?
- javascript - 超过最大更新。进入无限循环
- android - 带有动画的 Android setContentView 无法正常工作