レスポンシブデザイン BOOTSTRAP スマホ閲覧時にフッターメニューが縦になってしまう。

Question

#追記

スマホの表示でかなり要件にちかくなりました。ありがとうございます。
文字表記が

テストその
１です

という風に左揃えになりますので中央揃えになりますでしょうか？
またそれぞれメニューの表記と表記の間に余分な余白があるように思いました。
そこでchrome検証をすると以下のように緑部分が邪魔をしています。

padding15pxは削除できないのでしょうか？
またPCでみると文字が左揃えで小さくなってしまいます。PCの時だけ文字フォントを12pxという風に変更できますか？

お世話になります。bootstrapを活用しフッターメニューを横一列に表示させたいです。よろしくお願いいたします。

#やりたいこと　フッターを1行で均等に４つ横に表示させたいです。

以下の写真をご覧ください。現在フッターを「PCで表示した時」フッターは以下の赤矢印のように1行で中央揃えに表示しています。
これと全く同じフッターの表示方法を「PCで表示した時」だけではなく「スマホで表示した時」も実装したいです。
つまりスマホで表示した時も赤矢印のように1行で中央揃えに表示したいです。

#できないこと

スマホ(レスポンシブ)で閲覧をすると以下のようにフッターが縦に表示してしまいます。

スマホでもPCと同様に上記の猫の写真のように1行で４つ項目が表示されるフッター表示としたいです。

#ためしたこと
bootstrapを利用しています。htmlとcssを記載いたします。

		<footer class="fixed-bottom footer mt-auto py-3">
			<div class="footer_container">
				<div class="row">
				   <div class="col-lg-3 skyblue">
					 col-lg-3
				   </div>
				   <div class="col-lg-3 pink">
					 col-lg-3
				   </div>
				   <div class="col-lg-3 skyblue">
					 col-lg-3
				   </div>
				   <div class="col-lg-3 skyblue">
					 col-lg-3
				   </div>
				</div>
			</div>
		</footer>

css

/* フッター */
.footer {
  background-color: #f5f5f5;
}

.footer_container {
  width: auto;
  max-width: 680px;
  padding: 0 15px;
  width:700px;
  margin-right: auto;
  margin-left : auto;
}

Answer 1

Bootstrapを使用しているのでしたら
col-lg-3のlgでブレイクポイントを指定しているということを理解しましょう。
<div class="col-3 skyblue">にすれば画面サイズに関係なくグリッドを分割できます。

グリッド～Bootstrap4移行ガイド

<footer class="fixed-bottom footer mt-auto py-3">
	<div class="footer_container">
		<div class="row">
			<div class="col-3 skyblue">
				col-3
			</div>
			<div class="col-3 pink">
				col-3
			</div>
			<div class="col-3 skyblue">
				col-3
			</div>
			<div class="col-3 skyblue">
				col-3
			</div>
		</div>
	</div>
</footer>

また、横幅の指定をどうするのかもう少し詰めるべきかと思われます。

.footer_container {
  width: auto; /* ←auto指定になっている */
  max-width: 680px; /* 最大幅が指定されているため、700pxにはならない */
  padding: 0 15px;
  width: 700px; /* ←CSSでは後に書いたものが優先される */
  margin-right: auto;
  margin-left : auto;
}

Comments

[退会済みユーザー]

ありがとうございます。上記コードを設定しましたが、スマホにした際に２つしかフッダーが表示されません。スマホでみた時に４つ表示させる為にはどのように指定すべきでしょうか？

[退会済みユーザー]

＞横幅の指定をどうするのかもう少し詰めるべきかと思われます。

横幅指定ですがスマホでみて一行で４つ表示する為にどのように指定方法を詰めればいいのでしょうか？

[okne]

横幅を700pxにしたいのか、autoにしたいのか分からないので指定は一つにしましょう、という意味でした。
2つしか表示されないのは、恐らく1つのメニュー幅が最大幅680pxを4分割したサイズになっているからかと。
今回は、ひとまずwidth: 700px;を削除してみましょう。想像している表示に近づくと思います。

[退会済みユーザー]

700pxを削除してみました。たしかに近づきましたが、縦表示となりました。スマホにした時は文字フォントを変更し、1行で４つのフッターを横に表示させたいです。

[退会済みユーザー]

text-align: center;で中央揃えはできました。

[okne]

試してみましたが、再現されませんでした。
こちらのサイトで確認しても表示は崩れていますか？
https://jsfiddle.net/02q89pyw/1/

[退会済みユーザー]

文字フォントを縮める事で実装できました！okneさんはコメントも非常に丁寧に入れて頂きましたし実際に環境で試していただけました。こういう丁寧な方が教えて頂けて本当に感謝しております。ありがとうございます。これからもよろしくお願いします

Answer 2

【変更点】
・footer_container→contaier
・footer_containerのcss削除
・nth-childでフォント縮小指定

Bootstrapを使うならgridシステムを理解した方が良いです。

・Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
http://websae.net/twitter-bootstrap-grid-system-21060224/

  <footer class="fixed-bottom footer mt-auto py-3">
            <div class="container">
                <div class="row">
                   <div class="col-3 col-md-3 skyblue">
                     col-lg-3
                   </div>
                   <div class="col-3 col-md-3 pink">
                     col-lg-3
                   </div>
                   <div class="col-3 col-md-3 skyblue">
                     col-lg-3
                   </div>
                   <div class="col-3 col-md-3 skyblue">
                     col-lg-3
                   </div>
                </div><!--row-->
            </div><!--container-->
        </footer>

/* フッター */
.footer {
  background-color: #f5f5f5;
}

div.col-3:nth-child(-n+4) {
font-size: 8px;
}

Comments

[退会済みユーザー]

ありがとうございます。スマホでみると1行で表示されましたが４つあるうち２つしかみえません。４つ全てを1行で表示させる為にはどのように指定すれば良いのでしょうか?

[退会済みユーザー]

自分の環境では340px以下でも4つ全て表示されます。
キャッシュは削除されましたか？
https://www.kbs-web.com/solution/item/hpinfo/cash.html

[退会済みユーザー]

はい。キャッシュは削除しています。いま追記していますので少々お待ちください

[退会済みユーザー]

お待たせいたしました。かなり近いところまでいってます！ありがとうございます。追記させて頂きましたのでご確認お願いいたします

[退会済みユーザー]

text-align: center;で中央揃えはできました。