Bootstrap 3：列排序
燃烧的水晶
我有这三栏。在“中等”屏幕中，它应类似于：列A（col-md-6）在顶部，列B（col-md-6）在列A旁边，列C（col-md-12）在列下面A和B。
像这样：
我在进行这种排序时遇到了问题。这是我当前的代码：
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
</div>
<div class="content3 col-xs-12 col-md-12">
12-Col-[Medium] C
</div>
<div class="content2 col-xs-12 col-md-6">
6-Col-[X-Small] B
</div>
</div>
</div>
</div>
目前看起来像这样： 
我签出了Bootstrap Docs，并使用了列推/拉。
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
</div>
<div class="content3 col-xs-12 col-md-12 col-md-push-6">
12-Col-[Medium] C
</div>
<div class="content2 col-xs-12 col-md-6 col-md-pull-12">
6-Col-[X-Small] B
</div>
</div>
</div>
</div>
但是这种方法似乎弄乱了布局。
我是否错过了代码中的某些内容？它没有按照我的预期进行。
劳埃德银行
您可以row像这样将类相互嵌套：
<div class="container">
<div class="row">
<div class="content1 col-xs-12 col-md-6">
6-Col-[X-Small] A
<div class="row">
<div class="content3 col-xs-12 col-md-12">
12-Col-[Medium] C
</div>
</div>
</div>
<div class="content2 col-xs-12 col-md-6">
6-Col-[X-Small] B
</div>
</div>
</div>
然后在嵌套.content3元素上设置自定义媒体查询
@media(min-width: 992px){
.content3{
width: calc(100% * 2);
}
}
上面使用了与Bootstrap相同的宽度断点.col-md-12。在该阈值处，的宽度.content3变为嵌套DIV宽度的两倍。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Bootstrap 3：列排序
- 2
Bootstrap 3中的列排序
- 3
Bootstrap 3和LESS语义列排序
- 4
重新对各行的Bootstrap 3列进行排序
- 5
Bootstrap垂直列排序
- 6
Twitter Bootstrap的列排序
- 7
在Bootstrap中为SEO重新排序3列
- 8
知道当前在Bootstrap DataTables中排序的列
- 9
Twitter Bootstrap列和角度排序依据
- 10
Bootstrap列的布局和排序（推/拉？）
- 11
Bootstrap 中的列排序有什么意义？
- 12
Bootstrap 4 列排序用例
- 13
Bootstrap 4.0 移动布局的排序/移动列
- 14
Twitter Bootstrap 3行和重新排序
- 15
使用Bootstrap 3重新排序
- 16
Bootstrap重新排序3x2
- 17
Bootstrap列与3列的顺序
- 18
Bootstrap列与3列的顺序
- 19
Bootstrap 3 1.5列偏移
- 20
Bootstrap 3问题与列移动
- 21
Bootstrap 3超大（xl）列
- 22
Bootstrap3-列接触
- 23
在Bootstrap 3中嵌套列
- 24
Bootstrap 3形式2列
- 25
Bootstrap 3响应矩形列
- 26
安排 3 个 Bootstrap 列
- 27
Bootstrap 3 - 半列问题
- 28
3列垂直居中连续Bootstrap 3
- 29
重新排序列Bootstrap
我来说两句