Bootstrap排版

BS3/ BS4	--/xs	xs/sm	sm/md	md/lg	Lg/xl
Bootstrap4	<=575px	576px~ 767px	768px~ 991px	992px~ 1199px	>=1200
column	col-*	col-sm-*	col-md-*	col-lg	Col-xl-*

舉例:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

因為網格套用預設值是沒有底色和邊框的,所以如果沒有先在style設一個有背景色和邊框的class,

會呈現無色狀態.

這個是在style 設一個class 套用後結果

<style>



.box{background-color: #ADADFF;border: 1px solid #FAFAFA;}

</style>

<div class="row">

            <div class="col box ">

              1 of 2

            </div>

            <div class="col box">

              2 of 2

            </div>

          </div>

          <div class="row">

            <div class="col box ">

              1 of 3

            </div>

            <div class="col box">

              2 of 3

            </div>

            <div class="col box ">

              3 of 3

            </div>

          </div>

如果希望能有響應式要另外套用,參數參考最上面的表格,每個區塊可以套用不同的參數!

比如:768px~以上希望是4欄,768以下是2欄,小於575是1欄

寬度1024px

寬度767px

寬度575px

為了不讓版面太長,語法只針對1of 4~ 4 of 4貼上



<div class="row">

            <div class="box col-12 col-md-3 col-sm-6  ">

             1 of 4

            </div>

            <div class="box col-12 col-md-3 col-sm-6  ">

            2 of 4

           </div>

           <div class="box col-12 col-md-3 col-sm-6  ">

            3 of 4

           </div>

           <div class="box col-12 col-md-3 col-sm-6  ">

            4 of 4

          </div>