如何在引导程序的响应期间在另一列的两行之间插入一列

如何在引导程序的响应期间在另一列的两行之间插入一列,第1张

我的正常布局是:

|A||C|

|B||C|

有两列 - 左和右。 ' A'和' B'是两列左列 ' C'是对了。

当我调整大小时,我希望它回复如下:

|A|

|C|

|C|

|B|

代码:

<div class="container row">
    <div class="col-sm-8">
            <div class="row">
                a
            </div>
            <div class="row">
                b
            </div>
    </div>
    <div class="col-sm-4">
        c
    </div>
</div>

我想我找到了基于Dan的解决方案

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="col-sm-12 col-xs-12" style="background-color: red">a</div>
            <div class="col-sm-6 col-xs-12 visible-xs" style="background-color: blue">c</div>
            <div class="col-sm-12 col-xs-12" style="background-color: orange">b</div>
        </div>
        <div class="col-sm-4 hidden-xs">
            <div class="col-sm-12 col-xs-12" style="background-color: blue">c</div>
        </div>
    </div>
</div>

最佳答案:

3 个答案:

答案 0 :(得分:3)

根据我对您的需求的理解,您可以按照预期的方式使用bootstrap完成重新排序:

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-xs-12">a</div>
        <div class="col-sm-6 col-xs-12">c</div>
        <div class="col-sm-push-6 col-sm-6 col-xs-12">c</div>
        <div class="col-sm-pull-6 col-sm-6 col-xs-12">b</div>
    </div>
</div>

jsFiddle

这是关于订购的官方bootstrap文档的link。

根据评论进行更新:

以下是使用bootstrap的解决方案:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="col-sm-12 col-xs-12">a</div>
            <div class="col-sm-12 col-xs-12">c</div>
            <div class="col-sm-12 col-xs-12 visible-xs">c</div>
            <div class="col-sm-6 col-xs-12 visible-xs">b</div>
        </div>
        <div class="col-sm-6 hidden-xs">
            <div class="col-sm-12 col-xs-12">c</div>
            <div class="col-sm-12 col-xs-12">b</div>
        </div>
    </div>
</div>

jsFiddle

答案 1 :(得分:0)

.col-*-push-*.col-*-pull-*用于重新排列不同屏幕尺寸的列。因此,您可以在列C2上使用.col-sm-pull-6,在列B上使用.col-sm-push-6。只需调整推/拉到布局所需的列数。

了解更多信息:getbootstrap.com/css/#grid

答案 2 :(得分:-1)

也可以使用float作为解决方案(如果你不想使用推/拉)

HTML

.a,.b,.c{height:60px;}
.a{background:red;}
.b{background:yellow;}
.c{background:blue;float:right;}
@media screen and (max-width:767px){
    .c{float:none;}

的CSS

{{1}}

这是一个jsfiddle jsfiddle

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复