Board logo

标题: Bootstrap CSS----------Bootstrap 网格系统(5) [打印本页]

作者: look_w    时间: 2019-5-11 14:55     标题: Bootstrap CSS----------Bootstrap 网格系统(5)

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

我们发现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。
在下面的实例中,我们有 <div class="col-sm-6">..</div>,我们将使用 .col-sm-offset-3 class 来居中这个 div。

代码如下:

    <!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 col-sm-offset-3"
            style="background-color: #dedef8;box-shadow:
            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
                <p>我是想要居中的列
                </p>
            </div>
        </div>
    </div>
     
    </body>
    </html>

效果如图:




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