Board logo

标题: Bootstrap 网格系统（5） [打印本页]
作者: look_w    时间: 2019-5-13 09:33     标题: Bootstrap 网格系统（5）

特殊情况处理实例
响应式列重置---修复列高度bug

当列的高度不一样时，在设备的自适应中后面的列可能会出现重叠。如下代码:

    <!DOCTYPE html>
    <html>
    <head>
       <title>列重置--列的高度bug修复</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <style>
    .show-grid { margin-top: 15px; }
    .show-grid [class^="col-"] {
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #eee;
      border: 1px solid #ddd;
    }
        </style>
    </head>
    <body>
    <div class="container">
     
    <h1>这个是高度bug</h1>
     
    <div class="row show-grid">
      <div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div>
      <div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
     
      <div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
      <div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
    </div>
     
    </body>
    </html>

效果为：


我们可以看到 这小型sm设备中 第二列和第三列叠在一起了，这不是我们想要的效果。

甚至当第一列高度更高时，可能后面的 第二第三第四列都会叠在一起。


怎么解决这个问题呢？

官网给出了一种解决方案（使用.clearfix（清理浮动）和响应式工具class的组合）--响应式工具我们后面会详细介绍

例如这里使用  <div class="clearfix visible-sm"></div>即可解决高度bug的问题。 我们是在sm设备中所以使用visible-sm。

完整解决代码为:

    <!DOCTYPE html>
    <html>
    <head>
       <title>列重置--列的高度bug修复</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     <style>
    .show-grid { margin-top: 15px; }
    .show-grid [class^="col-"] {
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #eee;
      border: 1px solid #ddd;
    }
        </style>
    </head>
    <body>
    <div class="container">
     
    <h1>这个是高度bug</h1>
     
    <div class="row show-grid">
      <div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6<br>内容要多多---内容要多多---内容要多多---内容要多多---内容要多多---内容要多多</div>
      <div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
     
    <!-- 在某些阈值时，某些列可能会出现比别的列高的情况。这个情况可能不是你所要的，建议使用.clearfix（清理浮动）和响应式工具classe的组合 -->
      <div class="clearfix visible-sm"></div>
     
      <div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
      <div class="col-xs-3 col-sm-6">.col-xs-3 .col-sm-6</div>
    </div>
     
    </body>
    </html>


效果图:




列偏移---让列居中显示

我们发现bootstrap分成12列的逻辑里 我们经常用到col-XX-6这些样式，具体左右的分配则是bootstrap框架自动来分配的位置了。比如如果我只有一列，用了col-sm-6，那么它显示的时候肯定是分配在左边的(如图)

代码如下:

    <!DOCTYPE html>
    <html>
    <head>
       <title>列偏移--让列居中</title>
        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">   
       <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>  
       <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
        <h1>Hello, world!</h1>
        <div class="row" >
            <div class="col-sm-6 "
            style="background-color: #dedef8;box-shadow:
            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <p>我是想要居中的列
                </p>
            </div>
        </div>
    </div>
     
    </body>
    </html>


我怎么能让它变成居中呢?  bootstrap提供了 列偏移 的样式.col-XX-offset-* 类。

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-XX-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
为了在小屏幕显示器上使用偏移，请使用 .col-sm-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。



欢迎光临 电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/) Powered by Discuz! 7.0.0