web制作覚え書き

bootstrap 4 変更点

bootstrap 3→4 変更点 ハマったこと覚書です。(ほぼ自分用ですみません)
早く日本語解説増えるといいな…

  • <div class=”text-sm-center text-md-left”>
    スマホ時センター、それ以外左寄せ
  • img-responsive → img-fluid
  • 3分割したいときは

<div class=”row”>
<div class=”col”></div>
<div class=”col”></div>
<div class=”col”></div>
</div>
のみ!数字不要。

  • col-xsはなくなった→ただのcolのみ
  • 画像レスポンシブ クラス名変更
    img-resposive →img-fluid
  • センター寄せ
    <div class=”row”>
    <div class=”col-sm-6 col-sm-offset-3″>…↓<div class=”row justify-content-center”>
    <div class=”col-sm-6″>…※row側につけるのがポイント
  • d-flexを入れ子にするときはd-flexクラス2個目以降不要(?)×<div class=”d-sm-flex”>
    <div class=”each_outline d-flex flex-column” > ←なぜか表示おかしくなる〇<div class=”d-sm-flex”>
    <div class=”each_outline flex-column” >
  • 均等に分割したいときは d-flex より 普通の col-smを使う

 

    この記事を元に問い合わせる








    ※確認画面は出ません。そのまま送信されますので、よくご確認の上送信ボタンを押してください。

    ※不具合などで送れない場合は、お手数ですが info@nagakute-design.comまたは090-6363-6760(深谷)まで連絡下さい。