1

我经历了许多类似的问题，并试图根据我的情况调整解决方案，但没有成功。

我正在尝试实现一些阅读器，所以我有一个阅读窗格，我想将它放在我的页面上。我想限制窗格的大小，以便用户不会阅读跨越大浏览器窗口的整个宽度的行，但我也希望该窗格在窗口中居中。在窗格上方，我有一个横跨整个页面宽度的标题。

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

我只使用设置了“max-width: 700px”的“span12”就得到了正确的行为，就阅读窗格而言，我希望它缩小，但我无法让 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 居中在页面上呢？

4

2 回答 2

1

我假设因为您使用row-fluid的是 bootstrap 2.0。Bootstrap 3.0 更干净地处理响应式网格，所以如果可以的话，我建议使用 3.0。

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

.container {
    max-width: 700px;
}

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

或者比使用 max-width 更好，您可以自定义 ( http://getbootstrap.com/customize/ ) 您的 twitter bootstrap 下载并在那里定义您自己的宽度（如果 700 对您很重要）。然后，您还可以删除较大的 @media 查询。

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

于 2013-11-11T21:41:18.207 回答
0

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

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

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

position:relative;
margin: 0 auto;
width: 700px;
float:none!important;
于 2013-11-11T19:27:28.113 回答