HTML, CSS: bootstrapでコンテンツが重なるのを解消したい

こんにちは。

こちらのページ(user profile with bootstrap 4)を参考にして、ウェブサイトを作りたいと思っているのですが、ウィンドウの幅を縮めていくと左側のプロフィールと右側のメインコンテンツが重なってしまいます。

以下がコードになるのですが、bootstrapを用いている以上、これはどうにもならないのでしょうか。せめて小型のタブレットのスクリーンサイズで重ならずに表示したいです。

html
1<!--navbar-->
2<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
3  <div class="container">
4    <a class="navbar-brand js-scroll-trigger" href="#page-top">Bootstrap</a>
5    <div>
6      <ul class="navbar-nav text-uppercase ml-auto">
7        <li class="nav-item">
8              <a class="btn btn-primary my-2 my-sm-0" type="submit"><i class="fa fa-sign-out"></i> Log out</a>
9        </li>
10      </ul>
11    </div>
12  </div>
13</nav>
14<!--our content goes here-->
15<div class="container content">
16    <div class="row profile">
17      <div class="col-md-3">
18        <div class="profile-sidebar position-fixed">
19          <!-- SIDEBAR USERPIC -->
20          <div class="profile-userpic">
21            <img src="https://media.rockstargames.com/chinatownwars/global/downloads/avatars/zhou_256x256.jpg" class="img-responsive" alt="">
22          </div>
23          <!-- END SIDEBAR USERPIC -->
24          <!-- SIDEBAR USER TITLE -->
25          <div class="profile-usertitle">
26            <div class="profile-usertitle-name">
27              Jason Davis
28            </div>
29            <div class="profile-usertitle-job">
30              Developer
31            </div>
32          </div>
33          <!-- END SIDEBAR USER TITLE -->
34          <!-- SIDEBAR BUTTONS -->
35          <div class="profile-userbuttons">
36            <button type="button" class="btn btn-success btn-sm">Follow</button>
37            <button type="button" class="btn btn-danger btn-sm">Message</button>
38          </div>
39          <!-- END SIDEBAR BUTTONS -->
40          <!-- SIDEBAR MENU -->
41          <div class="profile-usermenu sidebar-sticky">
42            <ul class="nav flex-column">
43              <li class="active nav-item">
44                <a href="#" class="nav-link active">
45                            <i class="fa fa-home"></i>
46                            Overview </a>
47              </li>
48              <li class="nav-item">
49                <a class="nav-link" href="https://codepen.io/jasondavis/pen/jVRwaG?editors=1000">
50                            <i class="fa fa-user"></i>
51                            Account Settings </a>
52              </li>
53              <li class="nav-item">
54                <a class="nav-link" href="#" target="_blank">
55                            <i class="fa fa-check"></i>
56                            Tasks </a>
57              </li>
58              <li class="nav-item">
59                <a class="nav-link" href="#">
60                            <i class="fa fa-flag"></i>
61                            Help </a>
62              </li>
63            </ul>
64          </div>
65          <!-- END MENU -->
66        </div>
67      </div>
68      <div class="col-md-9">
69        <div class="profile-content">
70          Some user related content goes here...
71          <h1>test</h1>
72          <h1>test</h1>
73          <h1>test</h1>
74          <h1>test</h1>
75          <h1>test</h1>
76          <h1>test</h1>
77          <h1>test</h1>
78          <h1>test</h1>
79          <h1>test</h1>
80          <h1>test</h1>
81          <h1>test</h1>
82          <h1>test</h1>
83          <h1>test</h1>
84          <h1>test</h1>
85        </div>
86      </div>
87    </div>
88  </div>
89<div class="container">
90  <div class="row">
91    <div class="col-md-3">
92    </div>
93    <div class="col-md-9 ft">
94<footer class="footer">
95  <div class="row">
96    <div class="col-md-4">
97      <span class="copyright">Copyright &copy; Your Website 2018</span>
98    </div>
99    <div class="col-md-4">
100      <ul class="list-inline social-buttons">
101        <li class="list-inline-item">
102          <a href="https://github.com/ELMORABITYounes">
103                  <i class="fa fa-github"></i>
104                </a>
105        </li>
106        <li class="list-inline-item">
107          <a href="https://www.facebook.com/younes.elmorabit.92">
108                  <i class="fa fa-facebook"></i>
109                </a>
110        </li>
111        <li class="list-inline-item">
112          <a href="https://www.linkedin.com/in/younes-elmorabit-2a162310b/">
113                  <i class="fa fa-linkedin"></i>
114                </a>
115        </li>
116      </ul>
117    </div>
118    <div class="col-md-4">
119      <ul class="list-inline quicklinks">
120        <li class="list-inline-item">
121          <a href="#">Privacy Policy</a>
122        </li>
123        <li class="list-inline-item">
124          <a href="#">Terms of Use</a>
125        </li>
126      </ul>
127    </div>
128  </div>
129</footer>
130</div>
131  </div>
132</div>

css
1html, body {
2  height: 100%;
3}
4body {
5  display: flex;
6  flex-direction: column;
7  background: #F1F3FA;
8}
9body { 
10  overflow-x:hidden;
11}
12#mainNav {
13  background-color: darkslategrey;
14  color:white;
15}
16#mainNav .navbar-brand {
17  color: #fed136;
18  font-family: 'Kaushan Script', 'Helvetica Neue', Helvetica, Arial, cursive;
19}
20
21
22.content {
23  flex: 1 0 auto;
24}
25.footer {
26  flex-shrink: 0;
27}
28
29
30footer {
31  text-align: center;
32  background-color: white;
33}
34.ft{
35  padding-left:22px;
36  padding-right:31px;
37}
38
39footer span.copyright {
40  font-size: 90%;
41  line-height: 40px;
42  text-transform: none;
43  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
44  color:blak;
45}
46
47footer ul.quicklinks {
48  font-size: 90%;
49  line-height: 40px;
50  margin-bottom: 0;
51  text-transform: none;
52  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
53}
54
55ul.social-buttons {
56  margin-bottom: 0;
57}
58
59ul.social-buttons li a {
60  font-size: 20px;
61  line-height: 40px;
62  display: block;
63  width: 40px;
64  height: 40px;
65  -webkit-transition: all 0.3s;
66  -moz-transition: all 0.3s;
67  transition: all 0.3s;
68  color: white;
69  border-radius: 100%;
70  outline: none;
71  background-color: #212529;
72}
73
74ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
75  background-color: #fed136;
76}
77.content{
78   margin-top:60px;
79 }
80
81
82/* Profile container */
83.profile {
84  margin: 20px 0;
85}
86
87/* Profile sidebar */
88.profile-sidebar {
89  padding: 20px 0 10px 0;
90  background: #fff;
91}
92
93.profile-userpic img {
94  float: none;
95  display:block;
96    margin:auto;
97  width: 50%;
98  height: 50%;
99  -webkit-border-radius: 50% !important;
100  -moz-border-radius: 50% !important;
101  border-radius: 50% !important;
102}
103
104.profile-usertitle {
105  text-align: center;
106  margin-top: 20px;
107}
108
109.profile-usertitle-name {
110  color: #5a7391;
111  font-size: 16px;
112  font-weight: 600;
113  margin-bottom: 7px;
114}
115
116.profile-usertitle-job {
117  text-transform: uppercase;
118  color: #5b9bd1;
119  font-size: 12px;
120  font-weight: 600;
121  margin-bottom: 15px;
122}
123
124.profile-userbuttons {
125  text-align: center;
126  margin-top: 10px;
127}
128
129.profile-userbuttons .btn {
130  text-transform: uppercase;
131  font-size: 11px;
132  font-weight: 600;
133  padding: 6px 15px;
134  margin-right: 5px;
135}
136
137.profile-userbuttons .btn:last-child {
138  margin-right: 0px;
139}
140    
141.profile-usermenu {
142  margin-top: 30px;
143}
144
145.profile-usermenu ul li {
146  border-bottom: 1px solid #f0f4f7;
147}
148
149.profile-usermenu ul li:last-child {
150  border-bottom: none;
151}
152
153.profile-usermenu ul li a {
154  color: #93a3b5;
155  font-size: 14px;
156  font-weight: 400;
157}
158
159.profile-usermenu ul li a i {
160  margin-right: 8px;
161  font-size: 14px;
162}
163
164.profile-usermenu ul li a:hover {
165  background-color: #fafcfd;
166  color: #5b9bd1;
167}
168
169.profile-usermenu ul li.active {
170  border-bottom: none;
171}
172
173.profile-usermenu ul li.active a {
174  color: #5b9bd1;
175  background-color: #f6f9fb;
176  border-left: 2px solid #5b9bd1;
177  margin-left: -2px;
178}
179
180/* Profile Content */
181.profile-content {
182  padding: 20px;
183  background: #fff;
184  min-height: 460px;
185}
186
187.nav>li {
188    position: relative;
189    display: block;
190}

もし解決方法をご存知の方がいらっしゃいましたらご教授ください。
よろしくお願いいたします。

＜追加＞

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

回答2件

ベストアンサー

html
1<!--our content goes here-->
2<div class="container content">
3    <div class="row profile">
4      <div class="col-md-3">
5        <div class="profile-sidebar position-fixed">

ここで、position-fixed を使ってますが、これはレスポンシブ未対応です。

Position - Bootstrap 4.2 - 日本語リファレンス

bootstrapに頼らずに自前でCSSを設定する必要があります。
まずは、上記のHTMLの position-fixed は削除して、
CSSに下記のコードを追加してください。

css
1/* Profile sidebar */
2.profile-sidebar {
3  padding: 20px 0 10px 0;
4  background: #fff;
5  position: sticky; /* 追加 */
6  top: 80px;        /* 追加 */
7}

Codepenサンプル

追加

正方形でない画像でも円形に切り抜く方法

css
1/* 追加 ここから */
2.profile-userpic {
3  width: 50%;
4  padding-top: 50%;
5  margin: auto;
6  position: relative;
7}
8/* ここまで */
9.profile-userpic img {
10  display: block;
11  position: absolute; /* 追加 */
12  top: 0;             /* 追加 */
13  bottom: 0;     　　 /* 追加 */
14  width: 100%;        /* 修正 */
15  height: 100%;       /* 修正 */
16  -webkit-border-radius: 50% !important;
17  -moz-border-radius: 50% !important;
18  border-radius: 50% !important;
19  object-fit: cover;
20}

投稿2020/09/06 21:33

総合スコア33790

2020/09/07 00:58

hatena19さんご回答ありがとうございます。アドバイス通り修正しましたら無事カードの幅がレスポンシブになりました。ここでなんですが、画面を狭めていくとカード内のプロフィール画像がカードから飛び出してしまう現象が今度は発生するようになってしまったのですが、よかったらこれについてもアドバイスいただけないでしょうか。以下が該当コードになります。 .profile-userpic img { float: none; display:block; margin:10px 50px 10px; width: 150px; height: 150px; -webkit-border-radius: 50% !important; -moz-border-radius: 50% !important; border-radius: 50% !important; object-fit: cover; object-position: center; }

hatena19

2020/09/07 01:20

width: 150px; height: 150px; というように固定値になってますので、画面を狭めてもサイズが変更されませんので、当然はみ出します。質問のコードでは%で指定してますので、それに戻せばはみ出しません。

toyop

2020/09/07 01:39

お返事ありがとうございます。質問内に書いたコードですと使う画像が正方形でないと丸く成型する際に画像がゆがんでしまうため、コードを書き換えたのが上記コメント内のコードになります。widthとheightを50%, 50%のような標記にすると画像がゆがんでしまうのですが、これはどうしたらよろしいでしょうか(質問内に画像を追加しました)。また、object-position: center;を指定しているのに画像が中央にならない理由もわかりますでしょうか。長々と申し訳ございません。よろしくお願いいたします。

hatena19

2020/09/07 03:55

回答に追記しましたので参考にしてください。

toyop

2020/09/07 04:51

hatena19さん詳細なご説明ありがとうございます。教えていただいたコードに修正したところ、画像が丸く、かつ中心に揃うようになりました。いろいろ質問攻めにしてしまいすみません。本当にありがとうございました。

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