使用引导程序在移动视图中使用100％宽度的col-xs-12

Question

我的HTML页面中有框。盒子宽度响应。在桌面上，它应该采用540px宽度，在移动设备中，框应该采用100%宽度。桌面中心对齐。我面临的问题是，在移动视图中，由于容器类，盒子宽度没有触及设备宽度。使用.row类可以修复此问题但是当我使用类时，它也会在桌面上消耗框的宽度。这可以在不编写额外媒体查询的情况下实现。 fiddle

<div class="container">
<div class="col-xs-12 col-md-6 box">
<div class="col-md-12" style="background:#022243">
content....
</div>
</div>
</div>

Answer 1

使用媒体查询是获得您所需要的最快，最可靠的方法我认为但是如果您不想再为我做我的方法就是这个......

<div class="container hidden-xs visible-sm-block">
  <div class="col-xs-12 col-md-6 box">
     <div class="col-md-12" style="background:#022243">
       content....
     </div>
  </div>
</div>


<div class="row visible-xs-block hidden-sm">
  <div class="col-xs-12 col-md-6 box">
     <div class="col-md-12" style="background:#022243">
       content....
     </div>
  </div>
</div>

尚未尝试，但我认为这可以解决您的问题。

希望有所帮助

Answer 2

见js小提琴：

Fiddle

是否有一个新的移动类从容器中删除移动设备上的填充，还添加了填充：0;在col-xs-12

.col-xs-12 {
    padding:0;
}
@media (max-width : 480px) {
    .mobile_fix {
        padding:0;
    }
}