Question

我遇到了很多类似的问题，并尝试根据我的情况调整解决方案，但没有成功。

我正在尝试实现一些读者，所以我有一个阅读窗格，我想在我的页面上居中。我想限制窗格的大小，以便用户没有跨越大型浏览器窗口的整个宽度的读取行，但我也想让窗格居中在窗口中。在窗格上方，我有一个横跨页面整个宽度的标题。

最初我尝试使用“span8 offset2”作为阅读窗格，但随着窗口大小的减小，我希望边距在窗格收缩之前消失，并且使用此设置，阅读窗格会不必要地缩小，挤压内容，因为窗口变得更薄。

我使用“span12”设置了“max-width：700px”的正确行为，就读取窗格而言，按照我想要的方式收缩，但我不能让div在页面上居中。

以下是我与之合作的内容：

<body>
  <div class="container">
    <div class="row-fluid">
      <div class="span12 reading-pane">
        <div class="row-fluid">
          <div class="nav">
            <div class="span6 offset3">
              Main Navigation
            </div>
            <div class="span2 offset1">
              Nav2
            </div>
          </div>
        </div>
        <div class="row-fluid">
          <div class="span12">
            <div class="body-text">
              Text Area
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

阅读窗格的样式如下：

.reading-pane {
  border: solid;
  border-color: #ccc;
  border-width: 3px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  min-height: 40px;
  line-height: 40px;
  max-width: 700px;
}

我尝试将以下内容添加到.reading-pane样式（单独）：

float: none;
margin-left: auto;
margin-right: auto;

margin: 0 auto;

float: none;
margin: 0 auto;

我还尝试将容器中的文本居中，这是我的标题文本的中心，而不是阅读窗格。

那么如何让span12 div成为页面的中心？

Answer 1

我假设您正在使用row-fluid，因为您正在使用bootstrap 2.0。 Bootstrap 3.0可以更清晰地处理响应式网格，所以如果你能推荐使用3.0。

然后将最大宽度移动到容器：

.container {
    max-width: 700px;
}

请注意，700包含排水沟，因此您可能需要使用730。

或者比使用max-width更好，您可以自定义（http://getbootstrap.com/customize/）您的Twitter引导程序下载，并定义您自己的宽度，如果700对您至关重要。然后你也可以删除更大的@media查询。

还有一些关于如何在3.0上完成网格的其他调整，我将其包含在这个小提琴中：http://jsfiddle.net/PQM34/2/

Answer 2

如果没有代码示例和Bootstrap的来源，很难衡量...... 请注意，这听起来像你使用框架错误。为什么不直接使用span10，span8等中心？

为了使div居中，使用margin:0 auto需要固定的宽度（％，px，em等）。

尝试将此css添加到.reading-pane：

position:relative;
margin: 0 auto;
width: 700px;
float:none!important;

将一个span12中的span12 div居中放置在Bootstrap中

2 个答案: