使用bootstrap

时间:2015-11-24 10:17:12

标签: css twitter-bootstrap layout grid

我试图使用bootstrap构建网格

desktop              what i want in        the bad result
                     mobile                i get
---------           -----------           ----------- 
|   1   |           |   |  1  |           | 2 |  1  |
---------           | 2 |------           ----------- 
|   2   |   ---->   |   |  3  |   ---->   |    3    | 
---------           -----------           ----------- 
|   3   |                                      ^
---------                                   no good!

这是我使用的代码:

<div class="container">
  <div class="row">
    <div class="col-md-12 col-md-push-0 col-xs-9 col-xs-push-3">
      1
    </div>
    <div class="col-md-12 col-md-pull-0 col-xs-3 col-xs-pull-9">
      2
    </div>
    <div class="col-md-12 col-md-pull-0 col-xs-9 col-xs-pull-9">
      3
    </div>
  </div>
</div>

link:http://www.bootply.com/PLZyOK413F

在第三个div我试图把它拉到9以便它适合

我该怎么做?

1 个答案:

答案 0 :(得分:0)

你试过吗

<div class="container">
  <div class="row">
    <div class="col-md-12 col-xs-9 pull-right">
      1
    </div>

    <div class="col-md-12 col-xs-3 pull-left">
      2
    </div>

    <div class="col-md-12 col-xs-9 pull-right">
      3
    </div>
  </div>
</div>