Bootstrap 3 push-pull 类在我的布局中创建一个空白

Question

我正在使用 Twitter Bootstrap 3.1.1。我有一个布局，我希望在大屏幕上将二级菜单拉到左侧。但是，使用 push/pull 类会在布局中留下空白。

移动视图正常工作，如下所示：

------------
|  Banner   |
------------
|  Menu     |
------------
|  Heading  |
------------
|  Content  |
------------

但是，在桌面视图中，会发生这种情况：

--------   ------------
| Menu |   | Banner   |
| Menu |  ------------
| Menu |
| Menu | 
--------
          ------------
          | Heading   |
          ------------
          | Content   |
          ------------

这个结果基本上是正确的，除了横幅和标题之间的差距很大。标题（以及随后的内容）应位于菜单旁边和横幅下方。菜单下方应保留空白（我不想换行任何块）。

我试过只使用 pull-right 和 pull-left，但这弄乱了我的移动视图。

标记（简体）：

<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>

还有一个fiddle：http://jsfiddle.net/c52jxde8/

Answer 1

您不需要推拉网格样式。当导航到达某个点时，您只需将三个项目拉到导航的右侧即可。

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 仅用于样式设置，您可以根据需要进行调整。

Bootstrap 3 push-pull 类在我的布局中创建一个空白

Bootstrap 3 push-pull classes create a gap in my layout

html

css

layout

twitter-bootstrap-3

Bootstrap 3 push-pull 类 在我的布局中创建一个空白

Bootstrap 3 push-pull classes create a gap in my layout

html

css

layout

twitter-bootstrap-3

Bootstrap 3 push-pull 类在我的布局中创建一个空白