ヤッチーのブログ

PHP,Bootstrap,J Query,Swiftやサーバ管理、トラウトのルアー釣り、ハードロック等の記録です

Bootstrap Honoka でグリッドを5列に、グリッド(flex)に画像を挿入、上部メニューを固定

1.Bootstrap Honoka でグリッドを5列に

f:id:php-7com:20181006230644j:plain

作業最終形デモ

https://burrn.work/honoka/top2.html

Bootstrapのグリッドシステムは、横並びにする列として合計12となるように、2列とか3列とか4列とか制約があります。しかし、グリッドを5列にする必要がありました。5列にしてみました。前記事のHTMLスライダーに関する箇所の下に以下を追加しました。

<section class="clearfix">
 <div class="flex_container">
  <div class="flex_in card text-white bg-primary">
   1列目がここに入ります。1列目は文字数が普通です。
  </div>
  <div class="flex_in card bg-light">
   2列目がここに入ります。2列目は文字数が少し多いです。
  </div>
  <div class="flex_in card text-white bg-primary">
   3列目がここに入ります。3列目は文字数がいちばん多いです。3列目は文字数がいちばん多いです。
  </div>
  <div class="flex_in card bg-light">
   4列目がここに入ります。4列目は文字数が普通です。
  </div>
  <div class="flex_in card text-white bg-primary">
   5列目がここに入ります。5列目は文字数が普通です。
  </div>
 </div>
</section>

そして、bootstrap.cssに以下を追加しました。

 .flex_in { padding:10px; margin:5px; }

 一旦サーバにUPLOADしました。f:id:php-7com:20181006210025j:plain

 5列どころか、5行です。

5列にするために、flex_containerクラスに以下のCSSを記述します。幅を均一にするためにflex_inクラスにwidthを指定しました。 

.flex_container {
 display:flex;
 justify-content: space-between;
}
.flex_in {
 padding:10px; margin:5px;
 width:20%;
}

f:id:php-7com:20181006215239j:plain

Bootstrap honokaでグリッドが5列になりました。

ただし、スマホにすると5列では見れたものではありませんので、スマホの場合は、5列ではなく、5行となるようにCSSで調整しました。

2.グリッド(Flex)に画像を入れる

画像を用意し、HTMLファイルを以下の様に修正します。

<section class="clearfix">
 <div class="flex_container">
  <div class="flex_in card text-white bg-primary">
   <img src="./images/sub_image_1.jpg" alt="" class="img-responsive">
   1列目がここに入ります。1列目は文字数が普通です。
  </div>
  <div class="flex_in card bg-light">
   <img src="./images/sub_image_2.jpg" alt="" class="img-responsive">
   2列目がここに入ります。2列目は文字数が少し多いです。
  </div>
  ~略~
  <div class="flex_in card text-white bg-primary">
   <img src="./images/sub_image_5.jpg" alt="" class="img-responsive">
   5列目がここに入ります。5列目は文字数が普通です。
  </div>
 </div>
</section>

クラスにimg-responsiveを追加しないと画像の縦横比が維持されないようです。

bootstrap.cssに本家のCSSの以下の記述を追加しました。

.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
 display: block;
 max-width: 100%;
 height: auto;
}

以下のように中々良い感じになりました。

f:id:php-7com:20181006223241j:plain

作業最終形デモ

https://burrn.work/honoka/top2.html

 3.上部メニューを固定

上部メニューを固定するのは、簡単でした。

HTMLファイルのheaderに sticky-top クラスを指定するだけで出来ました。

<header class="sticky-top">