Question

我正在使用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/

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推拉式类在我的布局中创造了一个空白

1 个答案: