responsive-design – Bootstrap 3 Grid：在行之间移动元素

发布时间：2020-12-17 21:32:40 所属栏目：安全来源：网络整理

导读：在学习Twitter Bootstrap 3来创建响应式网页时,我遇到了一个问题：如何将元素从一行移动到另一行？我需要像col-md-push / col-md-pull这样的东西,但是需要垂直方向. 例如,在桌面屏幕上元素D在第二行,但在平板电脑上它应该在第一行：桌面： | A | B | C | |

在学习Twitter Bootstrap 3来创建响应式网页时,我遇到了一个问题：
如何将元素从一行移动到另一行？我需要像col-md-push / col-md-pull这样的东西,但是需要垂直方向.

例如,在桌面屏幕上元素D在第二行,但在平板电脑上它应该在第一行：

桌面：
| A | B | C |
| D | E | F |

片剂：
| A | D |
| B | C |
| E | F |

电话：
| A |
| D |
| B |
| E |
| C |
| F |

提前致谢！

解决方法

使用嵌套列找到解决方案. A和D元素分组在一列中.在桌面屏幕(col-md)上,它们各占12列,因此D位于A下方.在平板电脑屏幕(col-sm)上,A和D的大小相同(6),以便它们适合一行.

完整代码：http://jsfiddle.net/UNs25/1/

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

        <div class="col-md-4 col-sm-12">
            <div class="row">
                <div class="col-md-12 col-sm-6">
                    <input type="text" class="form-control" placeholder="A">
                </div>
                <div class="col-md-12 col-sm-6">
                    <input type="text" class="form-control" placeholder="D">
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-6">
            <input type="text" class="form-control" placeholder="B">
            <input type="text" class="form-control" placeholder="E">            
        </div>

        <div class="col-md-4 col-sm-6">
            <input type="text" class="form-control" placeholder="C">
            <input type="text" class="form-control" placeholder="F">            
        </div>      

    </div>      
</div>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!