bootstrap スマホ対応を意識

参考サイト

jumbotron トップページするキャッチコピーのやつ && container

• container
  • pcは横並び
  • spは縦並び

conainer

• container
  幅によって横幅が変わるらしい

|  | Extra small |
|:--|:--|:--|:--|:--|:--|
| <576px | Small |
| ≥576px | Medium |
| ≥768px | Large |
| ≥992px | Extra large |
| ≥1200px |
| max-width | 100% | 540px | 720px | 960px | 1140px |

• .container-fluid

横は常に100%

グリッドシステム

• 下記を見るとcolがスマホかな？

.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md- (medium devices - screen width equal to or greater than 768px) # スマホ横幅は750pxでOKらしい 2018年の記事
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px) # macpro width 1400  1/2 700

• こんな感じで普通にやると

<div class="container">
      <div class="row">
        <div class="col-sm-4">
          <h3>column</h3>
          <p>hello</p>
        </div>
        <div class="col-sm-4">
          <h3>head</h3>
          <p>hello</p>
        </div>
        <div class="col-sm-4">
         <h3>yahoo</h3>
         <p>hello</p>
        </div>
      </div>

• pc

• sp

spも
縦で表示されてしまう

• col-3を追加するとspの時も横になる

 <div class="container">
      <div class="row">
        <div class="col-sm-4 col-3">
          <h3>column</h3>
          <p>hello</p>
        </div>
        <div class="col-sm-4 col-3">
          <h3>head</h3>
          <p>hello</p>
        </div>
        <div class="col-sm-4 col-3">
         <h3>yahoo</h3>
         <p>hello</p>
        </div>
      </div>
    </div>

 <div class="container">
      <div class="row">
        <div class="col">
          <h3>column</h3>
          <p>hello</p>
        </div>
        <div class="col">
          <h3>head</h3>
          <p>hello</p>
        </div>
        <div class="col">
         <h3>yahoo</h3>
         <p>hello</p>
        </div>
        <div class="col">
            <h3>head</h3>
            <p>hello</p>
          </div>
          <div class="col">
           <h3>yahoo</h3>
           <p>hello</p>
          </div>
      </div>
    </div>

tutorial