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

我的HTML页面中有一个框。箱子的宽度很小。在桌面上，它的宽度应为

540px

width；在移动设备上，盒子的宽度应为

100%

width。桌面上的中心对齐。我面临的问题是，在移动视图上，由于容器类的原因，框的宽度没有接触到设备的宽度。使用

.row

类可以解决这个问题，但当我使用类时，它也会扩大桌面上框的宽度。无需编写额外的媒体查询即可实现这一要求

所容纳之物

参见js fiddle：

做了一个新的mobile类来从容器中删除mobile上的填充，还添加了填充：0；关于col-xs-12

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

参见js fiddle：

做了一个新的mobile类来从容器中删除mobile上的填充，还添加了填充：0；关于col-xs-12

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

---

使用媒体查询是最快、最可靠的方法，可以满足您的需求。我想，如果您不想这样做，那么我的方法就是

<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>

所容纳之物
所容纳之物

还没有试过，但我想这会解决你的问题

---

希望能有所帮助

使用媒体查询是最快、最可靠的方法，可以满足您的需求。我想，如果您不想，那么我的方法就是

<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>

所容纳之物
所容纳之物

还没有试过，但我想这会解决你的问题

---

---

希望有帮助

为什么不修改col-xs-12类的CSS？或者只是将另一个类添加到div中，并在媒体查询中定义需要它处于活动状态的类？不理想，但我能想到的唯一不使用媒体查询的方法我的意思是只使用引导媒体查询为什么不修改col-xs-12类的CSS？或者只是将另一个类添加到div中，并在媒体查询中定义需要它处于活动状态的类？不理想，但我能想到的唯一方法是不使用媒体查询我的意思是只使用引导媒体查询我上面提到的，不编写额外的@media查询是的，我很抱歉我一定错过了第一次扫描的阅读我无法想象在没有使用某种js黑客的情况下，不使用媒体查询就可以做到这一点？（不同大小屏幕的不同大小=媒体查询）。很抱歉，没有阅读到原始帖子。我的意思是只使用引导媒体查询。您可以将.container{padding:0；}添加到我上面提到的引导css文件中的（max width:480px；）查询中，如果不写额外的@media查询是的，我很抱歉，我一定错过了第一次扫描时的阅读。我无法想象，如果不使用某种js黑客，在没有媒体查询的情况下能够做到这一点？（不同大小屏幕的不同大小=媒体查询）。很抱歉没有读到原始帖子。我的意思是只使用引导媒体查询。您可以将.container{padding:0；}添加到引导css文件中的（max width:480px；）查询中。老实说，这可能是对他的问题的最好答案，但显然需要复制内容。@joegandy是的，你刚才提到了一个布条的弱点。。用如此多的

元素填充DOM

，例如

div

：=）老实说，这可能是对他的问题的最好回答，但显然需要复制内容。@joegandy是的，你刚才提到了BootStrap的一个弱点。。用如此多的

元素填充DOM

，例如

div

：=）