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

Question

我最近开始使用Bootstrap，除了遇到这个问题之外没有任何问题。我已经建立了自己的个人网站使用它，并将其设计为响应式，至今在任何事情上看起来都很棒。

但我遇到的问题是，从980px - 1200px，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-1200像素是它正确呈现唯一的间隔，我至今拥有该时间间隔内没有媒体查询。有没有人遇到过这个问题？或者是否有人知道可能会造成这种情况？

一个页面的例子可以在这里看到（你会发现，如果你慢慢地调整浏览器窗口）： http://portfolio.jrstrauss.net/work/

Answer 1

[编辑]这是完全不同的东西：你需要重写/解决您的HTML，例如您可以将.span3应用于header元素，以便按预期漂浮。第二块也是一样。

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

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

Answer 2

你有一个媒体查询瞄准屏幕宽度达979px，

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

和下一个瞄准的1200像素的屏幕宽度和高达

@media (min-width: 1200px) 

什么980px和1200像素在中间会使用默认样式。您可以通过将第二个媒体查询更改为最小宽度：980像素而不是1200像素来解决此问题。