我正在使用Twitter Bootstrap 3.1.1。我有一个布局，希望在大屏幕上将辅助菜单向左拉。但是，使用推/拉类会在布局中留下空白。
移动视图正常工作，如下所示：
------------
| Banner |
------------
| Menu |
------------
| Heading |
------------
| Content |
------------
但是，在桌面视图中，会发生以下情况：
-------- ------------
| Menu | | Banner |
| Menu | ------------
| Menu |
| Menu |
--------
------------
| Heading |
------------
| Content |
------------
除了横幅和标题之间的较大间隙外，此结果基本上是正确的。标题（及其后的内容）应位于菜单旁边和横幅下方。菜单下方应保留空白（我不希望包装任何块）。
我尝试仅使用向右拉和向左拉，但这弄乱了我的移动视图。
标记（简体）：
<section id="banner-content" class="col-md-9 col-md-push-3">
<h1>Banner Content</h1>
</section>
<section id="menu" class="col-md-3 col-md-pull-9">
<h3>Menu Title</h3>
<ul role="navigation">
<li>Menu Item with Link</li>
<li>Menu Item With Link</li>
<li>Menu Item With Link</li>
</ul>
</section>
<section id="heading" class="col-md-9 col-md-push-3">
<h2>Secondary Page Title</h2>
</section>
<section id="contentwrapper" class="col-md-9 col-md-push-3">
<p>Content here</p>
</section>
和一个小提琴：http://jsfiddle.net/c52jxde8/
最佳答案
您不需要推拉网格样式。您只需要在导航到特定点时将三个项目拉到导航的右侧即可。
FIDDLE
HTML：
<div id="Banner" class="col-xs-12 col-sm-8 pull-right">
Banner Content
</div>
<div id="Navigation" class="col-xs-12 col-sm-4">
Menu Title
<ul role="navigation">
<li>Menu Item with Link</li>
<li>Menu Item With Link</li>
<li>Menu Item With Link</li>
<li>Menu Item With Link</li>
<li>Menu Item With Link</li>
</ul>
</div>
<div id="Title" class="col-xs-12 col-sm-8 pull-right">
Secondary Page Title
</div>
<div id="Content" class="col-xs-12 col-sm-8 pull-right">
Content here
</div>
CSS：
div {
color:white;
}
#Banner {
background:red;
height:50px;
}
#Navigation {
background:green;
height:150px;
}
#Title {
background:blue;
height:50px;
}
#Content {
background:orange;
height:50px;
}
如您所见，当您按下移动宽度时，横幅会在导航上方，而其余的内容会在其下方，但是在小屏幕和大屏幕上，会将其全部拉到导航div的右侧。 CSS仅用于样式设置，您可以对其进行调整以满足您的需求。
关于html - Bootstrap 3推拉类在我的布局中造成了差距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29147622/