使用 bootstrap 4 对 3 列进行排序和堆叠
Order and stack 3 columns with bootstrap 4
我在 bootstrap 列中有这个结构:
而且我要你改成低分辨率,命令如下:
我在这里找到了使用 flexbox 的方法:
但是我无法将项目的整个结构更改为 flexbox,所以我想知道 bootstrap 4 是否可以这样做。
非常感谢。
我考的很差
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
div {
text-align: center;
height: 60px;
}
#left {
background: yellow;
}
#middle {
background: blue;
}
#right {
background: coral;
}
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div id="left">COLUMN 1</div>
</div>
<div class="col-sm-6 col-md-6">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-3 col-md-3">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
您是否尝试拉第 2 列以降低分辨率?
我假设 "resolution" 你是指较小的屏幕尺寸?
这是一个可能的解决方案,它使用一些 bootstrap push/pull 网格实用程序来重新排列中等尺寸视口中的列,然后按照您在中所示的方式重新排列小尺寸视口中的布局你的图表。在小屏幕视图中,在媒体查询中,我使用 css 属性 order
对第 1 列和第 3 列进行垂直重新排序希望它能让你走上正确的轨道
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class='row'>
<div id='leftcont' class="col-md-6 pull-md-12">
<div id="left">COLUMN 1</div>
</div>
<div id='rightcont' class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>
CSS:
div {
text-align:center;
height:60px;
}
#left{background:yellow;}
#middle {background:blue;}
#right {background:coral;}
@media (max-width: 768px) {
#leftcont { order: 2; }
#rightcont {
order: 1;
margin-bottom: 1em; }
}
新建fiddle
div 的高度可能需要针对网格断点进行调整,但由于彩色 div 仅用于测试,我没有将它们与您的示例相匹配
您可以使用 Bootstrap 4(alpha 6)实用程序 类 来 避免额外的 CSS。 1-2-3 在手机上变为 3-2-1。
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="row">
<div class="col-md-6 pull-md-12 flex-last flex-md-unordered">
<div id="left">COLUMN 1</div>
</div>
<div class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>
我在 bootstrap 列中有这个结构:
而且我要你改成低分辨率,命令如下:
我在这里找到了使用 flexbox 的方法:
但是我无法将项目的整个结构更改为 flexbox,所以我想知道 bootstrap 4 是否可以这样做。
非常感谢。
我考的很差
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' );
div {
text-align: center;
height: 60px;
}
#left {
background: yellow;
}
#middle {
background: blue;
}
#right {
background: coral;
}
<div class="container">
<div class="row">
<div class="col-sm-3 col-md-3">
<div id="left">COLUMN 1</div>
</div>
<div class="col-sm-6 col-md-6">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-3 col-md-3">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
您是否尝试拉第 2 列以降低分辨率?
我假设 "resolution" 你是指较小的屏幕尺寸?
这是一个可能的解决方案,它使用一些 bootstrap push/pull 网格实用程序来重新排列中等尺寸视口中的列,然后按照您在中所示的方式重新排列小尺寸视口中的布局你的图表。在小屏幕视图中,在媒体查询中,我使用 css 属性 order
对第 1 列和第 3 列进行垂直重新排序希望它能让你走上正确的轨道
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class='row'>
<div id='leftcont' class="col-md-6 pull-md-12">
<div id="left">COLUMN 1</div>
</div>
<div id='rightcont' class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>
CSS:
div {
text-align:center;
height:60px;
}
#left{background:yellow;}
#middle {background:blue;}
#right {background:coral;}
@media (max-width: 768px) {
#leftcont { order: 2; }
#rightcont {
order: 1;
margin-bottom: 1em; }
}
新建fiddle
div 的高度可能需要针对网格断点进行调整,但由于彩色 div 仅用于测试,我没有将它们与您的示例相匹配
您可以使用 Bootstrap 4(alpha 6)实用程序 类 来 避免额外的 CSS。 1-2-3 在手机上变为 3-2-1。
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-6 push-md-3">
<div id="middle">COLUMN 2</div>
</div>
<div class="col-sm-4 col-md-6">
<div class="row">
<div class="col-md-6 pull-md-12 flex-last flex-md-unordered">
<div id="left">COLUMN 1</div>
</div>
<div class="col-md-6">
<div id="right">COLUMN 3</div>
</div>
</div>
</div>
</div>
</div>