twitter-bootstrap – 在Bootstrap 3中堆叠列时的垂直空间

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – 在Bootstrap 3中堆叠列时的垂直空间前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当列以移动模式堆叠时,我想要一些垂直空间分隔列内容,我该怎么做?

http://jsfiddle.net/tofutim/3sWEN/中看到jsfiddle并改变输出的宽度。在第二个叶尖之前应该有一些间距。

  1. <div class="container">
  2. <div class="well well-lg" style="margin:10px">
  3. <div class="row">
  4. <div class="col-sm-6">
  5. <p>"Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
  6. <form>
  7. <input type="textBox" class="form-control" placeholder="Username"></input>
  8. <input type="password" class="form-control" placeholder="Password"></input>
  9. </form>
  10. </div>
  11. <div class="col-sm-6">
  12. <p>"Lorem ipsum dolor sit amet,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
  13. <form role="form">
  14. <div class="form-group">
  15. <button class="form-control btn btn-default">Push me</button>
  16. <input type="textBox" class="form-control" placeholder="Username"></input>
  17. <input type="password" class="form-control" placeholder="Password"></input>
  18. </div>
  19. </form>
  20. </div>
  21. </div>
  22. </div>
  23. </div>

解决方法

一种方法是使用CSS,在较小的设备/宽度上将margin-bottom添加到col- *。
  1. @media (max-width: 768px) {
  2.  
  3. [class*="col-"]{
  4. margin-bottom: 15px;
  5. }
  6.  
  7. }

另一种方法添加只在较小设备/宽度上可见的div。

  1. <div class="col-sm-6">
  2. <div class="hidden-lg hidden-md hidden-sm">&nbsp;</div>
  3. ...

演示:http://bootply.com/92276

猜你在找的Bootstrap相关文章