Bootstrap中的栅格化布局

Posted 2020-07-12 珊瑚月

bootstarp的栅格化布局使得我们布局简单，我们只需要利用.container/.container-fluid,.row即可实现，其下是一个例子：

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well">
      </div>
    </div>
    <div class="col-xs-6">
      <div class="well">
      </div>
    </div>
  </div>
</div>

 

上述例子是一个栅格化布局的简单利用，那么是怎么实现的呢？以.container-fluid为例

.container-fluid 样式定义如下：

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

其主要作用是实现内容的居中,而其中的padding是为了实现内容不会从浏览器的边界开始，那么接下来就是.row

.row {
  margin-right: -15px;
  margin-left: -15px;
}

貌似.row的margin值抵消了.container-fluid的margin值，内容还是从边界开始，这是为什么呢，这和其嵌套有关，先看下其列，以col-xs-6为例，

.col-xs-6 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col-xs-6 {
  width: 50%;
}

其中拥有padding值，使得内容并不会触碰到container-fluid,并且可以看出，每两个列之间的间距为30px;然后就来解答为什么.container-fluid和.row有padding与margin值，这是因为我们可以在一个列中在利用.row 进行栅格化布局，这样，就无需再加上.container样式。