Bootstrap中的柵格化佈局

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樣式。