Question

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

但我遇到的问题是从980px到1200px，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/

Answer 1

您的媒体查询定位屏幕宽度最高为979px，

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

下一个目标是屏幕宽度为1200px及以上

@media (min-width: 1200px)

介于980px和1200px之间的任何内容都将使用默认样式。您可以通过将第二个媒体查询更改为最小宽度：980px而不是1200px来解决此问题。

Answer 2

[edit]这是完全不同的东西：你需要重写/修复你的HTML，例如您可以将.span3应用于header元素，因此它会按预期浮动。你的第二个街区也是如此。

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

你基本上设置了正确的类，但随后在里面添加了全宽块元素。

Bootstrap从980px到1200px充当移动设备

2 个答案: