【问题标题】:Find where is a border coming from查找边界来自哪里
【发布时间】:2012-04-18 20:24:13
【问题描述】:

我正在使用 Twitter Bootstrap 在 PhoneGap 上创建布局。

with 是 768px;

我有这个简单的 HTML:

<div class="container">
<div class="span12" style="background: red;">
<img src="img/teste.png">
</div>
</div>

我放置红色背景只是为了检查宽度是否正常。 这是图片,768px;

这是我添加图片时该死的左边距:

我已经检查了 bootstrap.css 和 bootstrap-responsive.css 的边距命令,但什么也没有。

图像宽度为 768 像素(选中)。我需要使图像适合 768px。

【问题讨论】:

  • 你为什么不使用检查器(右键单击,检查元素)看看发生了什么?
  • 感谢@EvanMulawski 忘记了这一点,现在我注意到当我添加图像时,bootstrap-responsive.css 似乎不起作用。

标签: html css image twitter-bootstrap


【解决方案1】:

您看到的边距是引导网格系统的一部分。它可以根据引导程序中给定的宽度正确匹配内容,并由.row div 偏移,您没有将其包含在标记中。

因此,只需将您的 .span12 div 包含在 .row div 中,它就应该被删除。

<div class="container">
    <div class="row">
        <div class="span12" style="background: red;">
            <img src="img/teste.png">
        </div>
    </div>
</div>

【讨论】:

  • 添加行使边距看起来更小但仍然存在。使用 firebug 我发现 CSS 计算值不正确,它没有调用正确的样式。在我的标题上我有这个元&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;,加载的宽度是711px,不知道为什么
  • @Gerep 将 img { width: 100%; height: auto; } 添加到您的 CSS 以测试图像是否在屏幕宽度上缩小。
【解决方案2】:

尝试将边距和填充重新设置为零

*{margin:0px;Padding:0px;}

【讨论】:

  • 相同的结果...我认为添加图像时bootstrap-responsive.css 不起作用,不知道是否有意义但是当我添加图像时,bootstrap-responsive.css 的 768px 宽度没用过
猜你喜欢
  • 2012-04-21
  • 1970-01-01
  • 2021-12-28
  • 1970-01-01
  • 2012-07-13
  • 2010-09-21
  • 1970-01-01
  • 2010-12-04
  • 1970-01-01
相关资源
最近更新 更多