0

我最近开始使用 Bootstrap 并没有遇到任何问题，除了我遇到的这个问题。我已经使用它建立了自己的个人网站，并将其设置为响应式，到目前为止它在所有方面看起来都很棒。

但我遇到的问题是，从 980 像素到 1200 像素，Bootstrap 以整页行呈现页面（就像它在移动设备上一样）。我正在使用 bootstrap-responsive.min 我的页面设置是：

 <div class="row-fluid">
      <div class="span3"> <!-- sidebar here --> </div>
      <div class="span8"> <!-- content of each page --> </div>
      <div class="span1"> &nbsp; <!-- empty for spacing --> </div>
 </div>

980px-1200px 是它正确渲染的唯一间隔，到目前为止我还没有针对该间隔的媒体查询。有没有人遇到过这个问题？或者有谁知道可能是什么原因造成的？

可以在这里看到一个页面示例（如果您慢慢调整浏览器窗口的大小，您会注意到）：http: //portfolio.jrstrauss.net/work/

4

2 回答 2

1

You have a media query targeting screen widths up to 979px,

@media (max-width: 979px) and (min-width: 768px)

And the next one is targeting screen widths of 1200px and up

@media (min-width: 1200px)

anything in-between 980px and 1200px will be using the default styles. You can fix this by changing the 2nd media query to have a min-width: 980px instead of 1200px.

于 2013-04-30T21:00:31.990 回答
0

[编辑] 这是完全不同的东西：你需要重写/修复你的 HTML，例如你可以应用.span3到header元素上，所以它会像预期的那样浮动。你的第二个街区也是如此。

<header class="row-fluid" style="display: inline-block;">
    <nav class="main span3">
        …
    </nav>
</header>

您基本上确实设置了正确的类，但随后在其中添加了全角块元素。

于 2013-04-30T20:50:49.347 回答