XOOPS輕鬆架 - 線上書籍

:::

BootStarp4實做入門
==============

1. 靠左對齊 `.justify-content-start` ```
  <pre class="brush:xml;gutter:false;">
  <div class="container">
      <div class="row justify-content-start">
          <div class="col-2">col 1/3</div>
          <div class="col-2">col 2/3</div>
          <div class="col-2">col 3/3</div>
      </div>
  </div>
  ```
2. 置中對齊 `.justify-content-center` ```
  <pre class="brush:xml;gutter:false;">
  <div class="container">
      <div class="row justify-content-center">
          <div class="col-2">col 1/3</div>
          <div class="col-2">col 2/3</div>
          <div class="col-2">col 3/3</div>
      </div>
  </div>
  ```
3. 靠右對齊 `.justify-content-end` ```
  <pre class="brush:xml;gutter:false;">
  <div class="container">
      <div class="row justify-content-end">
          <div class="col-2">col 1/3</div>
          <div class="col-2">col 2/3</div>
          <div class="col-2">col 3/3</div>
      </div>
  </div>
  ```
4. 分散對齊（含左右） `.justify-content-around` ```
  <pre class="brush:xml;gutter:false;">
  <div class="container">
      <div class="row justify-content-around">
          <div class="col-2">col 1/3</div>
          <div class="col-2">col 2/3</div>
          <div class="col-2">col 3/3</div>
      </div>
  </div>
  ```
5. 分散對齊（不含左右） `.justify-content-between` ```
  <pre class="brush:xml;gutter:false;">
  <div class="container">
      <div class="row justify-content-between">
          <div class="col-2">col 1/3</div>
          <div class="col-2">col 2/3</div>
          <div class="col-2">col 3/3</div>
      </div>
  </div>
  ```
6. 詳情：<http://bootstrap.hexschool.com/docs/4.0/layout/grid/#%E6%B0%B4%E5%B9%B3%E5%B0%8D%E9%BD%8A>
7. 範例： See the Pen [水平對齊](https://codepen.io/tad0616/pen/qXMjEa/) by Tad ([@tad0616](https://codepen.io/tad0616)) on [CodePen](https://codepen.io).
  
   <script async="" src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

:::

書籍目錄

展開 | 闔起

快速登入

進階搜尋

https%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fmarkdown.php%3Ftbdsn%3D939

計數器

今天：
昨天：
總計：

MarkDown

書籍目錄

快速登入

計數器