Bootstrap3网格布局

Question

我无法找到一种方法来完成这项工作。

我有一个侧边栏，我在桌面一侧向右拉。 我不知道将粉红色的div放在哪一行。

这就是我写的，但我认为它不是很好.. http://jsfiddle.net/o7vmx2to/

<div class="row">
<article class="col-xs-24 col-sm-18 pull-right">
    <div>Left div</div>
</article>
<aside class="col-xs-24 col-sm-6 pull-left"> 
    <div class="row">
        <div class="col-xs-24">
            <ul class="list-unstyled button_list">
                <li>button a</li>
                <li>button b</li>
                <li>button c</li>
                <li>button d</li>
                <li>button e</li>
                <li>button f</li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div>This one need to be moved</div>
    </div>
</aside>

Answer 1

1. 您需要将您的内容包装在<div class="container">中，当您从xs更改为sm，md和lg时会自动调整大小
2. Bootstrap网格系统基于12列而非24.所以将所有内容除以2

JSFiddle：http://jsfiddle.net/snatgu5f/

实际上如果在左图中交换蓝色和绿色div会更容易。因为那样你最终得到一个标准的bootstrap布局，而不需要.pull-right类。我怀疑你可能真的想要这个。代码必须是这样的：

<div class="container"><div class="row">

    <div class="col-xs-12 col-sm-3">
        <nav><ul class="nav nav-stacked nav-pills">
            <li class="diabled">Menu</li>
            <li><a href="#">Something</a></li>
        </ul></nav>
    </div>

    <div class="col-xs-12 col-sm-9">
        <article class="row">
            Some Text
        </article>
        <article class="row">
            Some more text
        </article>
    </div>
</div></div>

然而，如果你真的需要像你的照片一样定位块，那么你可以做什么（诀窍就是只有一行，要么做出左菜单＆＃34;拉 - 左边＆＃34;或其他街区＆＃34;右拉＆＃34;

<div class="container">

<div class="row"> 
    <article class="col-xs-12 col-sm-9 pull-right">
    Green Block </article>

    <nav class="col-xs-12 col-sm-3">
        <ul class="list-unstyled button_list">
            <li>button a</li>
            <li>button b</li>
            <li>button c</li>
            <li>button d</li>
            <li>button e</li>
            <li>button f</li>
        </ul>
    </nav>

    <article class="col-xs-12 col-sm-9 pull-right">
    Purple block</article>

</div>