首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >小型平板电脑和手机上的引导响应修复

问小型平板电脑和手机上的引导响应修复
EN

Stack Overflow用户
提问于 2013-01-27 18:40:51
回答 1查看 784关注 0票数 1

我使用bootstrap 2.2.2,并有以下html标记。

代码语言:javascript
复制
<div class="container">
      <h1>Responsive boxes</h1>
      <div class="row-fluid">
        <div class="span3">
          <h3>M. 1</h3>
        </div>
        <div class="span3">
          <h3>M. 2</h3>
        </div>
        <div class="span3">
          <h3>M. 3</h3>
        </div>
        <div class="span3">
          <h3>M. 4</h3>
        </div>
      </div>
    </div> <!-- /container -->

和css标记如下:

代码语言:javascript
复制
body {
  background-color: #fff;
  font-family: 'Cabin', Helvetica, Arial, sans-serif;
  width: 100%;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lobster', Georgia, Times, serif;
}

h3{
  color: #fff;
  font-size: 139px;
  line-height: 171px;
}

.span3 {
  background: rgb(255, 81, 10);
  height: 200px;
  overflow: hidden;
  margin-bottom: 30px;
}

这个标记在桌面上运行良好,当我调整视窗(例如iphone)的大小时,框变得像预期的一样小,但是右边距被删除了。只有左边的空白处。我希望左右边距对齐。

如何解决这个问题?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-01-27 21:37:02

这就是你要找的吗?

http://jsfiddle.net/panchroma/BkNSL/

我注释掉了你身体css中的宽度

代码语言:javascript
复制
body {
background-color: #fff;
font-family: 'Cabin', Helvetica, Arial, sans-serif;
/* width: 100%;*/
text-align: center;
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/14546546

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档