Bootstrap div 比手机宽度更宽答案

【问题标题】：Bootstrap div wider than phone widthBootstrap div 比手机宽度更宽
【发布时间】：2017-04-21 15:31:10
【问题描述】：

所以我有这些引导 div 比手机的宽度 (412px) 更宽。为什么？我该怎么做才能使 div 与手机的宽度一样宽？

    <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background: red">
        1234567890-1234567890-1234567890-
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background: yellow">
        1234567890-1234567890-1234567890-
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background: blue">
        1234567890-1234567890-1234567890-
    </div>
    </div>

【问题讨论】：

这些 div 似乎没有问题。您的视口元标记设置为什么？任何其他影响宽度、填充、边距等的 CSS？
您添加了视口元标记吗？ <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
这就是我所拥有的。添加 shrink-to-fit=no 没有帮助 :(
尝试添加initial-scale
我已经把你的确切还是一样的结果。

标签： html css twitter-bootstrap razor twitter-bootstrap-3

【解决方案1】：

您缺少作为引导程序的父级的 container 类，所以使用这个：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background: red">
      1234567890-1234567890-1234567890-
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background: yellow">
      1234567890-1234567890-1234567890-
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" style="background: blue">
      1234567890-1234567890-1234567890-
    </div>
  </div>
</div>

编辑

鉴于您的链接，问题是您的 CSS 文件中的 body 中的 min-width:600px

【讨论】：

容器同理。现在我也有一些填充，来自容器 media.giphy.com/media/3oKIPjDKUXYfOVjWaQ/giphy.gif
请显示您的完整代码，从<!DOCTYPE html>到结束
jsfiddle.net/y149vs33 该死的 jsfiddle 似乎有效。也许我有一些自定义隐藏的 CSS，我会检查 :(
如果您给我们一个链接，我们可能会帮助您调试它
@Cătălin Rădoi 添加 css 到 body 可能有助于解决它