我在使用twitter bootstrap 2.3.2 row-fluid
将网站划分为徽标和菜单切换部分的网站中获得了标头导航栏。防止在小屏幕尺寸下堆叠行流体跨度 - twitter bootstrap 2.3.2
导航是好的,直到它进入跨度开始堆叠的较小屏幕尺寸,在这种情况下,我希望最右边的蓝色跨度保持在右侧,最左侧的绿色空间保留在左侧中央跨度。我将如何实现这一目标?
下图为> 960像素的资产净值(请注意伊夫有色的跨越,以使其更易于查看/调试)
下图为> 780px的导航,但< 960像素
以下是导航< 780px。这就是问题发生的地方,在这里发生的事情是,蓝色跨度和绿色跨度分别像以前一样留在他们的左右位置。
这是使用,我会发布的jsfiddle html的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
为中心的跨度,但对于开发我觉得它更容易在左边放置一个空的跨度和颜色背景中的调试。
谢谢,再采取
col-sm-~
风格。块我需要重写,即时通讯有点困惑,我会重写它,基本上控制大小的唯一线是宽度线,我会改变这一点? - 抱歉回来,但我只是有点困惑,以至于如何改变将工作 – sam 2014-10-19 13:52:09@sam当你**不需要**时,使用'col-sm-'类(从Bootstrap 3中获取)一个元素在较小的屏幕尺寸下折叠。我附加了bootstrap 3.0的相关样式,您现在可以在代码中使用它。 – 2014-10-19 13:54:20