1

我使用引导程序 2.2.2 并具有以下 html 标记。

<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 标记如下:

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)的大小时,框按预期变小了,但右边距被删除。只有左边距。我希望左右边距对齐。

如何解决这个问题?

4

1 回答 1

0

这就是你所追求的吗?
http://jsfiddle.net/panchroma/BkNSL/

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

body {
background-color: #fff;
font-family: 'Cabin', Helvetica, Arial, sans-serif;
/* width: 100%;*/
text-align: center;
}
于 2013-01-27T13:37:01.560 回答