防止行液跨度在小屏幕尺寸下堆叠 - twitter bootstrap 2.3.2

Question

我在一个使用Twitter bootstrap 2.3.2 row-fluid的网站中有一个标题导航，将导航分成徽标和菜单切换的部分。

导航很好，直到它进入跨越开始堆叠的较小屏幕尺寸，在这种情况下，我希望最右边的蓝色跨度保持在右边，并且最左边的绿色空间保留在左边的a中央跨度。我怎么做到这一点？

以下是＆gt; 960px的导航（请注意我已经对跨度进行着色以便于查看/调试）

以下是＆gt; 780px但<960px的导航

以下是＆lt; 780px的导航栏。这就是问题发生的地方，这里发生的id是蓝色跨度和绿色跨度分别保持在左右位置，如前所述。

这是html即时通讯使用，我会发布一个jsfiddle，但我不能在那里复制问题，因为它认为有一些外部样式应用为从现有主题内部进行im编辑。

<div class="row-fluid">

    <div class="span1 bg-green">
    </div>

    <div class="span10 logo-centre bg-red">
        <a id="logo"> LOGO </a>
    </div>

    <div class="span1 bg-blue">
    </div>

</div>

我知道我可以使用span10 offset1作为中心范围但是为了在开发过程中进行调试，我发现在左侧放置一个空跨度并为背景着色更容易。

Answer 1

Bootstrap 2.3.2没有内置支持来维护较小视口中的宽度（3.0确实如此）。因此，对于位于导航中的768px类的任何内容，您必须手动为页面宽度小于span添加媒体查询。

这是你需要基本上覆盖的。

@media (max-width: 767px)
.span12, .row-fluid .span12 {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

以下是来自Bootstrap 3.0的col-sm-~的样式

@media (min-width:768px) {
    .col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11,.col-sm-12 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }
}