Question

我正在使用基本引导功能根据屏幕宽度更改列位置。

我想在第1列之前显示第2列的大型和＆amp;介质。对于小我想先显示第1列和第1列。然后是第2列。这是有效的，但我面临的问题是row容器＆amp;当屏幕小于1000像素时，取整个宽度。我怎么能保持容器类container content-wrapper

<div class="main-wrapper">
<div class="container content-wrapper"> 
        <div class="row"> 
            <div class="col-md-5 col-sm-push-7 gb-red">
            1 IMAGE
            </div>
            <div class="col-md-7 col-sm-pull-5 gb-green">
                2 TEXT
            </div>
        </div>
    </div>
    </div>

CodePen https://codepen.io/anon/pen/aYjQVZ

Answer 1

在您的版本中，由于bootstrap中的断点而导致其崩溃。

/ *小型设备（平板电脑，768像素及以上）'sm'

/ *中型设备（桌面，992px及以上）md

/ *大型设备（大型桌面，1200px及以上）'lg'

您只提到了'md'和lg，这就是为什么您的代码从（992px到768px）

突破的原因

我已分别插入 col-sm-5 和 col-sm-7 以避免发生故障。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main-wrapper">
    <div class="container content-wrapper"> 
        <div class="row"> 
            <div class="col-md-5 col-sm-5  col-sm-push-7 bg-info">
                Col 1111
            </div>
            <div class="col-md-7 col-sm-7 col-sm-pull-5 bg-danger">
                Col 2222
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 2

将col-md-5和col-md-7更改为col-sm或为col-sm添加类。

您的问题是因为您没有为宽度小于1000px的设备指定div的宽度，因此您的div占用100％但保留了marges。添加col-sm类时，指定宽度并修复问题。

使用推拉时，Bootstrap会爆发

2 个答案: