BOOTSTRAP：重新排列移动
我在如何在移动设备上重新排列面板时遇到问题。 面板有不同的尺寸。 请参阅附件以获取大屏幕（col-lg）页面的屏幕截图：
当我在手机（col-xs）上查看时，我得到：
第一个小组
第4小组
第7小组
第二小组
第五小组
第3小组
第六小组
请参阅移动屏幕的图像：
我想在移动设备（col-xs）中重新排列面板的位置，因此安排如下：
第一个小组
第二小组
第3小组
第4小组
第7小组
第五小组
第六小组
请参阅我的代码的代码段
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- 1st panel -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">1st</h3>
</div>
<div class="panel-body">
1st panel<br>
1st panel<br>
1st panel
</div>
</div>
<!-- 4th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">4th</h3>
</div>
<div class="panel-body">
4th panel<br>
4th panel<br>
4th panel<br>
4th panel<br>
</div>
</div>
<!-- 7th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">7th</h3>
</div>
<div class="panel-body">
7th panel<br>
7th panel<br>
7th panel<br>
7th panel<br>
</div>
</div>
</div>
<!-- 2nd panel -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">2nd</h3>
</div>
<div class="panel-body">
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel
</div>
</div>
<!-- 5th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">5th</h3>
</div>
<div class="panel-body">
5th panel<br>
5th panel<br>
5th panel<br>
5th panel<br>
</div>
</div>
</div>
<!-- 3rd panel -->
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">3rd</h3>
</div>
<div class="panel-body">
3rd panel<br>
3rd panel<br>
3rd panel
</div>
</div>
<!-- 6th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">6th</h3>
</div>
<div class="panel-body">
6th panel<br>
6th panel<br>
6th panel<br>
6th panel<br>
</div>
</div>
</div>
</div>
</body>
</html>
4 个答案:
答案 0 :(得分：0)
请关注Bootstrap网格系统和选项。我认为使用它可以解决你的问题。
设备有预定义的尺寸。所以，你可以使每个div等所有设备兼容。
答案 1 :(得分：0)
如果你想在大型设备和额外设备中安装两套不同的设备，你需要有两套不同的代码（因为你要完全改变“div”的顺序，网格系统不会来任何援助。）
在bootstrap中，您可以拉或推列。但是无法根据设备移动行。
对于您想要的规范，您可以做的是使用可见性过滤添加相同的代码两次 -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- Only for large devices, will be visible only in large devices -->
<!-- 1st panel -->
<div class="col-lg-4 hidden-md hidden-sm hidden-xs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">1st</h3>
</div>
<div class="panel-body">
1st panel<br>
1st panel<br>
1st panel
</div>
</div>
<!-- 4th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">4th</h3>
</div>
<div class="panel-body">
4th panel<br>
4th panel<br>
4th panel<br>
4th panel<br>
</div>
</div>
<!-- 7th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">7th</h3>
</div>
<div class="panel-body">
7th panel<br>
7th panel<br>
7th panel<br>
7th panel<br>
</div>
</div>
</div>
<!-- 2nd panel -->
<div class="col-lg-4 hidden-md hidden-sm hidden-xs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">2nd</h3>
</div>
<div class="panel-body">
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel
</div>
</div>
<!-- 5th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">5th</h3>
</div>
<div class="panel-body">
5th panel<br>
5th panel<br>
5th panel<br>
5th panel<br>
</div>
</div>
</div>
<!-- 3rd panel -->
<div class="col-lg-4 hidden-md hidden-sm hidden-xs">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">3rd</h3>
</div>
<div class="panel-body">
3rd panel<br>
3rd panel<br>
3rd panel
</div>
</div>
<!-- 6th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">6th</h3>
</div>
<div class="panel-body">
6th panel<br>
6th panel<br>
6th panel<br>
6th panel<br>
</div>
</div>
</div>
<!-- Only for extra small devices, will be visible only in mobile device -->
<div class="col-xs-12 hidden-lg hidden-md hidden-sm">
<!-- 1st panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">1st</h3>
</div>
<div class="panel-body">
1st panel<br>
1st panel<br>
1st panel
</div>
</div>
<!-- 4th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">4th</h3>
</div>
<div class="panel-body">
4th panel<br>
4th panel<br>
4th panel<br>
4th panel<br>
</div>
</div>
<!-- 7th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">7th</h3>
</div>
<div class="panel-body">
7th panel<br>
7th panel<br>
7th panel<br>
7th panel<br>
</div>
</div>
<!-- 2nd panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">2nd</h3>
</div>
<div class="panel-body">
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel
</div>
</div>
<!-- 5th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">5th</h3>
</div>
<div class="panel-body">
5th panel<br>
5th panel<br>
5th panel<br>
5th panel<br>
</div>
</div>
<!-- 3rd panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">3rd</h3>
</div>
<div class="panel-body">
3rd panel<br>
3rd panel<br>
3rd panel
</div>
</div>
<!-- 6th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">6th</h3>
</div>
<div class="panel-body">
6th panel<br>
6th panel<br>
6th panel<br>
6th panel<br>
</div>
</div>
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
如果它适合您的设计，您可以尝试这样的事情
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">
</head>
<body>
<div class="container">
<!-- 1st panel -->
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">1st</h3>
</div>
<div class="panel-body">
1st panel<br>
1st panel<br>
1st panel
</div>
</div>
</div>
<div class="col-lg-4">
<!-- 4th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">2nd</h3>
</div>
<div class="panel-body">
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel<br>
2nd panel
</div>
</div>
</div>
<!-- 7th panel --> <div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">3rd</h3>
</div>
<div class="panel-body">
3rd panel<br>
3rd panel<br>
3rd panel<br>
3rd panel<br>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">4th</h3>
</div>
<div class="panel-body">
4th panel<br>
4th panel<br>
4th panel
</div>
</div>
</div>
<div class="col-lg-4">
<!-- 4th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">5th</h3>
</div>
<div class="panel-body">
5th panel<br>
5th panel<br>
5th panel<br>
5th panel<br>
</div>
</div>
</div>
<!-- 7th panel --> <div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">6th</h3>
</div>
<div class="panel-body">
6th panel<br>
6th panel<br>
6th panel<br>
6th panel<br>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">7st</h3>
</div>
<div class="panel-body">
7th panel<br>
7th panel<br>
7th panel
</div>
</div>
</div>
</div>
</body>
</html>
答案 3 :(得分：0)
我建议您将所有.panel元素按降序添加到.col-md-12 div。这将为您提供中型屏幕上所需的布局。
在col-lg-*的默认引导1200px断点处为大尺寸屏幕添加媒体查询，并使用flexbox布局并将flex-direction设置为row，这样可以处理所需的内容在大屏幕上从左到右依次降序排列。
这是一个例子。您可能还想查看can i use flexbox 对于不支持flexbox的浏览器，互联网上有许多后备解决方案。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
@media (min-width: 1200px) {
.lg-flex-row {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
.panel {
flex: 0 1 32%;
}
}<div class="container">
<div class="row">
<!-- 1st panel -->
<div class="col-md-12 lg-flex-row">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">1st</h3>
</div>
<div class="panel-body">
1st panel<br />
1st panel<br />
1st panel
</div>
</div>
<!-- 2n panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">2nd</h3>
</div>
<div class="panel-body">
2nd panel<br />
2nd panel<br />
2nd panel<br />
2nd panel<br />
2nd panel<br />
2nd panel
</div>
</div>
<!-- 3rd panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">3rd</h3>
</div>
<div class="panel-body">
3rd panel<br />
3rd panel<br />
3rd panel
</div>
</div>
<!-- 4th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">4th</h3>
</div>
<div class="panel-body">
4th panel<br />
4th panel<br />
4th panel<br />
4th panel
</div>
</div>
<!-- 5th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">5th</h3>
</div>
<div class="panel-body">
5th panel<br />
5th panel<br />
5th panel<br />
5th panel
</div>
</div>
<!-- 6th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">6th</h3>
</div>
<div class="panel-body">
5th panel<br />
5th panel<br />
5th panel<br />
5th panel
</div>
</div>
<!-- 7th panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">7th</h3>
</div>
<div class="panel-body">
5th panel<br />
5th panel<br />
5th panel<br />
5th panel
</div>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？