Question

在网站上我有一些看起来像这样的东西

----------------------------------
| Image 1  | Image 2  | Image 3  |
----------------------------------
| Text 1   | Text 2   | Text 3   |
----------------------------------

在我想要的小型设备上

----------------------
| Image 1  | Text 1  |
----------------------
| Image 2  | Text 2  |
----------------------
| Image 3  | Text 3  |
----------------------

在手机上我想要这个

-----------
| Image 1 |
-----------
| Text 1  | 
-----------
| Image 2 | 
-----------
| Text 2  | 
-----------
| Image 3 | 
-----------
| Text 3  | 
-----------

显然这会导致多次按下/拉出块。 Bootstrap似乎没有证明如何做到这一点。

这是我到目前为止没有推/拉的代码：

                            <div id="services" class="col-sm-12">
                                <div id="services-img" class="col-lg-4 col-md-4 col-sm-4">
                                        <img>IMG 1 HERE</img>                           
                                </div>
                                <div id="services-img" class="col-lg-4 col-md-4 col-sm-4">
                                        <img>IMG 2 HERE</img>                           
                                </div>
                                <div id="services-img" class="col-lg-4 col-md-4 col-sm-4">
                                        <img>IMG 3 HERE</img>                           
                                </div>
                                <div id="services-text" class="col-lg-4 col-md-4 col-sm-4">
                                        <p>TEXT 1 HERE</p>                          
                                </div>
                                <div id="services-text" class="col-lg-4 col-md-4 col-sm-4">
                                        <p>TEXT 2 HERE</p>                          
                                </div>
                                <div id="services-text" class="col-lg-4 col-md-4 col-sm-4">
                                        <p>TEXT 3 HERE</p>                          
                                </div>
                            </div>

Answer 1

将整件事放入<div class="container">并将您的第一个<div id="services" class="col-sm-12">更改为<div id="services" class="row">

工作示例http://www.codeply.com/go/6x2iKhjcXj

顺便说一句 - 你不能拥有像service-img

那样具有相同身份的元素

Answer 2

DEMO：http://jsfiddle.net/fopdasqo/1/

无需拉动或推动：）

<div id="services" class="col-sm-12">
    <div class="col-xs-12 col-md-4">
        <div id="services-img" class="col-sm-6 col-md-12">
            <img>IMG 1 HERE</img>                           
        </div>
        <div id="services-text" class="col-sm-6 col-md-12">
            <p>TEXT 1 HERE</p>                          
        </div>
    </div>
    <div class="col-xs-12 col-md-4">
        <div id="services-img" class="col-sm-6 col-md-12">
            <img>IMG 2 HERE</img>                           
        </div>
        <div id="services-text" class="col-sm-6 col-md-12">
            <p>TEXT 2 HERE</p>                          
        </div>
    </div>
    <div class="col-xs-12 col-md-4">
        <div id="services-img" class="col-sm-6 col-md-12">
            <img>IMG 3 HERE</img>                           
        </div>
        <div id="services-text" class="col-sm-6 col-md-12">
            <p>TEXT 3 HERE</p>                          
        </div>
    </div>
</div>

Bootstrap推拉多个cols

2 个答案: