Question

我正在尝试在bootstrap中实现以下布局，但我似乎无法在移动设备和桌面中正确布局。

我的“移动”示例见：http://www.bootply.com/I7N9hf54yv

因为网站在一些手机和平板电脑上看起来不错，而在其他手机和平板电脑上完全无法使用。

我也尝试了类似于：http://www.bootply.com/rY6JSRZX5f

的内容

对于我想要的桌面外观：

 _________________________
|question|   p  |question|
|        |   i  |        |
|        |   c  |        |
|question|   t  |question|
|        |   u  |        |
|        |   r  |        |
|question|   e  |question|
|________|______|________|



and mobile:

___________________________
|         question         |
|                          |
|         question         |
|                          |
|         question         |
|                          |
|            p             |
|            i             |
|            c             |
|                          |
|        question          |
|                          |
|        question          |
|                          |
|        question          |
|__________________________|

Answer 1

你正在寻找这样的东西：

<div class="row">
    <div class="col-md-4 col-sm-12 col-xs-12">
        questions
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12">
        picture
    </div>
    <div class="col-md-4 col-sm-12 col-xs-12">
        questions
    </div>
</div>

Answer 2

也许是这样的？ http://jsfiddle.net/swm53ran/18/

<div class="col-md-12 text-center">
    <div class="row">
        <div class="col-md-4 col-sm-12" style="color:blue;">
            <div class="row"><div class="col-md-12">Question</div></div>
            <div class="row"><div class="col-md-12">Question</div></div>
        </div>
        <div class="col-md-4 col-sm-12">
            <div class="row"><div class="col-md-12">Picture</div></div>
            <div class="row"><div class="col-md-12">Picture</div></div>
            <div class="row"><div class="col-md-12">Picture</div></div>
        </div>
        <div class="col-md-4 col-sm-12" style="color:red;">
            <div class="row"><div class="col-md-12">Question</div></div>
            <div class="row"><div class="col-md-12">Question</div></div>
            <div class="row"><div class="col-md-12">Question</div></div>
        </div>
    </div>
</div>

乍一看，似乎可能有很多嵌套的div，但它的编码方式是为了将每个问题和图片保存在自己的个别空间中，您可以在其中应用样式/所有喜欢＆＃34;容器的功能＆＃34;保持代码尽可能干净并尽可能保持可维护

移动/桌面的Bootstrap网格

2 个答案: