html - Bootstrap 充当 980px - 1200px 的移动设备

Question

我最近开始使用 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/

Answer 1

您有一个针对屏幕宽度最大为 979 像素的媒体查询，

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

下一个目标是 1200 像素及以上的屏幕宽度

@media (min-width: 1200px)

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