zoukankan      html  css  js  c++  java
  • bootstrap基础学习(四)——网格系统(列的偏移、排序、嵌套)

    网格系统——列偏移、列排序、列嵌套

    列偏移:有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。

    <div class="container">
    
    <div class="row">
    
    <div class="col-md-4">.col-md-4</div>
    
    <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
    
    <div class="col-md-2">.col-md-3</div>
    
    </div>
    
    <div class="row">
    
    <div class="col-md-4">.col-md-4</div>
    
    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
    
    </div>
    
    </div>
    列偏移

    注意:不过有一个细节需要注意,使用”col-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示,如:

    <div class="row">
    
      <div class="col-md-3">.col-md-3</div>
    
      <div class="col-md-3 col-md-offset-3">col-md-offset-3</div>
    
      <div class="col-md-4">col-md-4</div>
    
    </div>
    列偏移断裂

    上面代码中列和偏移列总数为3+3+3+4 = 13>12,所以发生了列断行。

    如上面的示例代码,得到的效果如下:                      

    列排序:列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。我们来看一个简单的示例:

    <div class="container">
    
      <div class="row">
    
        <div class="col-md-4">.col-md-4</div>
    
        <div class="col-md-8">.col-md-8</div>
    
      </div>
    
    </div>
    列排序

    默认情况之下,上面的代码效果如下:

    如果要互换位置,需要将“col-md-4”向右移动8个列的距离,也就是8个offset ,也就是在“<div class=“col-md-4”>”添加类名“col-md-push-8”,调用其样式。也要将“col-md-8”向左移动4个列的距离,也就是4个offset,在“<div class=”col-md-8”>”上添加类名“col-md-pull-4”,代码及效果如下:

    <div class="container">
    
      <div class="row">
    
        <div class="col-md-4 col-md-push-8">.col-md-4</div>
    
        <div class="col-md-8 col-md-pull-4">.col-md-8</div>
    
      </div>
    
    </div>
    列排序(互换位置)

     

    列嵌套:你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。来看一个简单示例:

    <div class="container">
    
        <div class="row">
    
            <div class="col-md-8">
    
            我的里面嵌套了一个网格
    
                <div class="row">
    
                <div class="col-md-6">col-md-6</div>
    
                <div class="col-md-6">col-md-6</div>
    
              </div>
    
            </div>
    
        <div class="col-md-4">col-md-4</div>
    
        </div>
    
        <div class="row">
    
            <div class="col-md-4">.col-md-4</div>
    
        <div class="col-md-8">
    
        我的里面嵌套了一个网格
    
            <div class="row">
    
              <div class="col-md-4">col-md-4</div>
    
              <div class="col-md-4">col-md-4</div>
    
              <div class="col-md-4">col-md-4</div>
    
            </div>
    
        </div>
    
        </div>
    
    </div>
    列嵌套

    代码得到如下效果图:

     

    注意:嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

  • 相关阅读:
    D. Babaei and Birthday Cake--- Codeforces Round #343 (Div. 2)
    Vijos P1389婚礼上的小杉
    AIM Tech Round (Div. 2) C. Graph and String
    HDU 5627Clarke and MST
    bzoj 3332 旧试题
    codeforces 842C Ilya And The Tree
    codesforces 671D Roads in Yusland
    Travelling
    codeforces 606C Sorting Railway Cars
    codeforces 651C Watchmen
  • 原文地址:https://www.cnblogs.com/jjyy0414/p/4387068.html
Copyright © 2011-2022 走看看