bootstrap4 フッターを下部に固定したがレスポンシブルに対応できない

bootstrap4 のsticky-footerというフッターを下部に固定できるサンプルを利用しています。
sticky-footerのソースをそのまま利用すれば問題なく動作するのですが、フッターの中を上下二層（上層を住所などの情報、下層をコピーライト）に分けたところ、下層の部分が画面サイズを縮小すると上にあがってきてしまいます。

html
1<footer class="footer">
2 <div class="footer-top">
3    <div class="container">
4      <div class="row">
5　　　　　<div class="col-md-4">
6		フッタートップ1
7	　</div><!-- .col-md-4 -->
8　　　　<div class="col-md-4">
9　　　　　　<p>フッタートップ2</p>
10　　　　　　<address>アドレス1行目<br />
11　　　　　　　　　　　アドレス1行目<br />
12　　　　　　　　　　　アドレス1行目<br />
13　　　　　　　　　　　アドレス1行目<br />
14　　　　　　　　　　　アドレス1行目<br />
15　　　　　　　　　　　アドレス1行目<br />
16　　　　　　　　　　　アドレス1行目</address>
17　　　　</div><!-- .col-md-4 -->
18　　　　<div class="col-md-4">
19　　　　　　<p>フッタートップ2</p>
20　　　　　　<address>アドレス1行目<br />
21　　　　　　　　　　　アドレス1行目<br />
22　　　　　　　　　　　アドレス1行目<br />
23　　　　　　　　　　　アドレス1行目<br />
24　　　　　　　　　　　アドレス1行目<br />
25　　　　　　　　　　　アドレス1行目<br />
26　　　　　　　　　　　アドレス1行目</address>
27　　　　</div><!-- .col-md-4 -->
28    </div><!-- .row -->
29</div><!-- .container -->
30</div><!-- .footer-top -->
31
32<div class="footer-bottom">
33<span>コピーライト</span>
34</div>
35</footer>

css
1html {
2  position: relative;
3  min-height: 100%;
4  }
5body {
6  margin-bottom: 280px;
7  }
8.footer {
9  position: absolute;
10  bottom: 0;
11  width: 100%;
12  height: 280px;
13  background-color: skyblue;
14  }
15
16.footer-bottom{
17  position: absolute;
18  background-color:gray;  
19  bottom: 0;
20  width: 100%;
21  }

行動規範の内容に同意します

回答2件

Bootstrapのグリッドシステムはそういうものです(狭いと縦に積み重なる)
https://getbootstrap.com/docs/4.0/layout/grid/#mix-and-match

ブレイクポイントのないものを選んでください。

HTML
1    <div class="col-4">1</div>
2    <div class="col-4">2</div>
3    <div class="col-4">3</div>

投稿2018/02/28 07:38

x_x

総合スコア13749

kagaminoB

2018/03/03 12:15

回答ありがとございます。 Bootstrapの仕様なのですね、一旦あきらめて時間があるときに再考いたします。

kagaminoB

2018/03/06 06:51

自己解決できましたので追記いたします。

行動規範の内容に同意します

自己解決

下記サイトの「3. そのままのHTMLにcalc()を使ってフッタを最下部に実装」を参考にさせていただきました。
http://coliss.com/articles/build-websites/operation/css/css-sticky-footer.html

html
1<body>
2<div class="wrapper">
3本文
4</div><!-- ./wrapper-->
5
6<footer class="footer">
7  <div class="container-fluid">
8    <div class="row footer-top">
9      <div class="col-md-4">
10        <p>フッタートップ1</p>
11      </div>
12      <div class="col-md-4">
13        <p>フッタートップ2</p>
14      </div>
15      <div class="col-md-4">
16        <p>フッタートップ3</p>
17      </div>
18    </div> <!-- ./row -->
19
20  <div class="row footer-bottom">
21    <div class="col-md-12">
22      <span>コピーライト</span>
23    </div>
24  </div> <!-- ./row -->
25 </div><!-- ./container-fluid-->
26</footer>

css
1.wrapper {
2  min-height: calc(100vh - 70px);
3  background: #fff;
4}
5.footer {
6  height: 50px;
7}
8.footer-top {
9  background-color: skyblue;
10}
11.footer-under {
12  background-color: gray; 
13}