Bootstrap Navbarのdropdown-menuの動作が小さくしてもPC版と同じになって今うのを直したい。

前提・実現したいこと

BootstrapのNavbarを使ってヘッダーを作っているのですが、画面を小さくしてスマホの大きさにしたときにdropdown-menuのクラスがPC版と同じになってしまいBootstrapのサイトのものと違くなってしまう。構造はコピペで張り付け変えていないつもりなのでどうしてこうなるのかが分からないです。
https://getbootstrap.com/docs/4.1/components/navbar/

発生している問題・エラーメッセージ

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
7
8    <!-- Bootstrap CSS -->
9    <link
10      rel="stylesheet"
11      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
12      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
13      crossorigin="anonymous"
14    />
15    <link rel="stylesheet" href="./style.css" />
16    <!--font awsome-->
17    <link
18      rel="stylesheet"
19      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
20    />
21    <link rel="stylesheet" href="./style.css" />
22    <title>課題</title>
23  </head>
24  <body>
25    <header>
26      <nav class="navbar navbar-expand-lg">
27        <a class="navbar-brand text-white brand-wrap" href="#"
28          ><img src="https://tcdwp.fun/tcd063/wp-content/uploads/2018/09/logo.png" alt=""
29        /></a>
30        <button
31          class="navbar-toggler"
32          type="button"
33          data-toggle="collapse"
34          data-target="#navbarSupportedContent"
35          aria-controls="navbarSupportedContent"
36          aria-expanded="false"
37          aria-label="Toggle navigation"
38        >
39          <span class="hamburger">
40            <span></span>
41            <span></span>
42            <span></span>
43          </span>
44        </button>
45
46        <div class="collapse navbar-collapse header-contents" id="navbarSupportedContent">
47          <ul class="navbar-nav menu">
48            <li class="nav-item">
49              <a class="nav-link" href="#">HOME</a>
50            </li>
51            <li class="nav-item dropdown">
52              <a
53                class="nav-link dropdown-toggle"
54                href="#"
55                id="navbarDropdown"
56                role="button"
57                data-toggle="dropdown"
58                aria-haspopup="true"
59                aria-expanded="false"
60              >
61                CONCEPT
62              </a>
63              <div class="dropdown-menu dropdown-group" aria-labelledby="navbarDropdown">
64                <a class="dropdown-item" href="#">ブログアーカイブ</a>
65                <a class="dropdown-item" href="#">お知らせアーカイブ</a>
66                <a class="dropdown-item" href="#">イベントアーカイブ</a>
67                <a class="dropdown-item" href="#">インタビューアーカイブ</a>
68                <a class="dropdown-item" href="#">FAQページ</a>
69                <a class="dropdown-item" href="#">固定ページ（デフォルト）</a>
70                <a class="dropdown-item" href="#">CONCEPT</a>
71                <a class="dropdown-item" href="#">SERVICE</a>
72                <a class="dropdown-item" href="#">FLOOR</a>
73                <a class="dropdown-item" href="#">ACCESS</a>
74              </div>
75            </li>
76            <li class="nav-item">
77              <a class="nav-link" href="#">SERVICE</a>
78            </li>
79            <li class="nav-item">
80              <a class="nav-link" href="#">FLOOR</a>
81            </li>
82            <li class="nav-item">
83              <a class="nav-link" href="#">INTERVEIW</a>
84            </li>
85            <li class="nav-item">
86              <a class="nav-link" href="#">BLOG</a>
87            </li>
88            <li class="nav-item">
89              <a class="nav-link" href="#">ACCESS</a>
90            </li>
91            <li class="nav-item">
92              <a class="nav-link" href="#">DOWNLOAD</a>
93            </li>
94          </ul>
95        </div>
96      </nav>
97    </header>
98    
99    <main></main>
100    <footer></footer>
101
102    <!-- Optional JavaScript -->
103    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
104    <script
105      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
106      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
107      crossorigin="anonymous"
108    ></script>
109    <script
110      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
111      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
112      crossorigin="anonymous"
113    ></script>
114    <script
115      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
116      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
117      crossorigin="anonymous"
118    ></script>
119  </body>
120</html>

CSS
1button:focus {
2  outline: 0;
3}
4
5
6header {
7  height: 90px;
8}
9
10nav {
11  background-color: rgb(0, 0, 0, 0.5);
12}
13
14header .navbar {
15  padding: 0;
16  height: 90px;
17}
18
19header .brand-wrap {
20  margin: 0 2% 0 4%;
21}
22
23header .brand-wrap img {
24  height: 100%;
25  width: 50%;
26}
27
28header .navbar-brand {
29  padding: 0 0 10px 0;
30}
31
32header .header-contents {
33  width: 70%;
34}
35
36header .menu {
37  width: 90%;
38  font-size: 14px;
39  margin-left: auto;
40  height: 90px;
41  margin-right: 7%;
42}
43
44header .menu li {
45  height: 100%;
46  width: 12%;
47  line-height: 66px;
48  text-align: center;
49}
50
51header .dropdown {
52  height: 90px;
53}
54
55header .menu li a {
56  width: 100%;
57  padding-left: 18px;
58  color: #fff;
59  height: 100%;
60}
61
62header .menu li a:hover {
63  color: #999999;
64}
65
66header .dropdown-group {
67  background-color: rgb(0, 0, 0, 0.5);
68  margin-top: 0px;
69  padding: 0;
70  border: 0px none;
71  border-radius: 0px;
72}
73
74header .dropdown-group :hover {
75  background-color: #442606;
76}
77
78header .dropdown-group a {
79  width: 220px;
80  text-align: left;
81  font-size: 14px;
82}
83
84
85
86@media (max-width: 991px) {
87  header {
88    height: 100%;
89  }
90
91  nav {
92    background-color: #000000;
93  }
94
95  header .navbar {
96    height: 100%;
97  }
98
99  header .brand-wrap {
100    height: 60px;
101    padding: 0;
102    line-height: 60px;
103    margin:0 0 0 5%;
104    width: 60%;
105  }
106
107  header .brand-wrap img {
108    height: auto;
109  }
110
111  .navbar-toggler {
112    padding: 0;
113    border: none;
114  }
115
116  header button {
117    width: 50px;
118    height: 44px;
119    margin-right: 4%;
120  }
121
122  header button .hamburger {
123    position: relative;
124    padding: 0 22px;
125    text-align: center;
126  }
127
128  header .hamburger span {
129    position: absolute;
130    width: 35px;
131    height: 4px;
132    background-color: #fff;
133    border-radius: 4px;
134    left: 4px;
135  }
136
137  header .hamburger span:nth-of-type(1) {
138    top: 0;
139  }
140
141  header .hamburger span:nth-of-type(2) {
142    top: 11.5px;
143  }
144
145  header .hamburger span:nth-of-type(3) {
146    bottom: 0;
147  }
148
149  header .menu {
150    height: 400px;
151    background-color: rgba(0, 0, 0);
152  }
153
154  header .menu li {
155    height: 50px;
156    padding: 0 0 0 20px;
157    width: 100%;
158    text-align: left;
159    line-height: 50px;
160  }
161
162  header .menu li a:hover {
163    color: #fff;
164  }
165
166  header .dropdown-group :hover {
167    background-color: #000000;
168  }
169
170  header .nav-link {
171    padding: 0;
172  }
173
174  header .dropdown-group {
175    margin-top: 0;
176  }
177
178  header .dropdown-group div {
179    height: 10%;
180  }
181}

試したこと

ブートストラップと見比べて、無いクラスがないかを確認した。
検証ツールで関係がありそうなところのチェックを外してみた。

補足情報（FW/ツールのバージョンなど）

Bootstrapのサイトの写真です。このようなDropdownメニューの開き方になって欲しいです

sunglass

2020/08/27 07:22

ざっくり確認してみましたがどこが問題なのでしょうか？？デザインが公式と違うので同じにしたい場合はheader .dropdown-group {...}を修正すれば同じデザインになります。こちらの環境では公式と同じように動作しています。

yutokk

2020/08/27 07:33

デザインは変えたくて追加したのですが、写真を追加したのですがCONCEPTの所を押すと他の物にかぶってしまうのを直したいのです。具体的にはCONCEPTを押したらCONCEPTとSERVICEの間に表示させられるようにしたいです。

sunglass

2020/08/27 08:44

であれば別の方法で実装した方が早いです。 Bootstrap公式には（ざっと見た感じでは）用意されていません。 https://webmoyou.com/web/703/ あたりはおすすめです。いかがでしょうか。

yutokk

2020/08/28 13:43

リンクまでありがとうございます。初心者であり、jsは分からないため少しハードルが高いです。また、今回はheader以降jsを使わないで行いたいこと、Bootstrapを上手に使えるようになりたいので別の解決策を探します。返信ありがとうございます。

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

回答1件

ベストアンサー

公式ドキュメント再度確認したらありました。
css等はデフォルトのままなのでご自身のお好きなように編集してください。
これで大丈夫でしょうか・・・？

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Bootstrap CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./style.css" />
    <!--font awsome-->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
    <title>課題</title>
  </head>
  <body>

<style>

button:focus {
  outline: 0;
}


header {
  height: 90px;
}

nav {
  background-color: rgb(0, 0, 0, 0.5);
}

header .navbar {
  padding: 0;
  height: 90px;
}

header .brand-wrap {
  margin: 0 2% 0 4%;
}

header .brand-wrap img {
  height: 100%;
  width: 50%;
}

header .navbar-brand {
  padding: 0 0 10px 0;
}

header .header-contents {
  width: 70%;
}

header .menu {
  width: 90%;
  font-size: 14px;
  margin-left: auto;
  height: 90px;
  margin-right: 7%;
}

/*header .menu li {
  height: 100%;
  width: 12%;
  line-height: 66px;
  text-align: center;
}*/

/*header .dropdown {
  height: 90px;
}*/

header .menu li a {
  width: 100%;
  padding-left: 18px;
  color: #fff;
  /*height: 100%;*/
}

header .menu li a:hover {
  color: #999999;
}

header .dropdown-group {
  background-color: rgb(0, 0, 0, 0.5);
  margin-top: 0px;
  padding: 0;
  border: 0px none;
  border-radius: 0px;
}

header .dropdown-group :hover {
  background-color: #442606;
}

header .dropdown-group a {
  width: 220px;
  text-align: left;
  font-size: 14px;
}


@media (max-width: 991px) {
  header {
    height: 100%;
  }

  nav {
    background-color: #000000;
  }

  header .navbar {
    height: 100%;
  }

  header .brand-wrap {
    height: 60px;
    padding: 0;
    line-height: 60px;
    margin:0 0 0 5%;
    width: 60%;
  }

  header .brand-wrap img {
    height: auto;
  }

  .navbar-toggler {
    padding: 0;
    border: none;
  }

  header button {
    width: 50px;
    height: 44px;
    margin-right: 4%;
  }

  header button .hamburger {
    position: relative;
    padding: 0 22px;
    text-align: center;
  }

  header .hamburger span {
    position: absolute;
    width: 35px;
    height: 4px;
    background-color: #fff;
    border-radius: 4px;
    left: 4px;
  }

  header .hamburger span:nth-of-type(1) {
    top: 0;
  }

  header .hamburger span:nth-of-type(2) {
    top: 11.5px;
  }

  header .hamburger span:nth-of-type(3) {
    bottom: 0;
  }

  header .menu {
    height: 400px;
    background-color: rgba(0, 0, 0);
  }

  header .menu li {
    /*height: 50px;*/
    padding: 0 0 0 20px;
    width: 100%;
    text-align: left;
    /*line-height: 50px;*/
  }

  header .menu li a:hover {
    color: #fff;
  }

  header .dropdown-group :hover {
    background-color: #000000;
  }

  header .nav-link {
    padding: 0;
  }

  header .dropdown-group {
    margin-top: 0;
  }

  header .dropdown-group div {
    height: 10%;
  }
}
</style>
    <header>
      <nav class="navbar navbar-expand-lg">
        <a class="navbar-brand text-white brand-wrap" href="#"
          ><img src="https://tcdwp.fun/tcd063/wp-content/uploads/2018/09/logo.png" alt=""
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarSupportedContent"
          aria-controls="navbarSupportedContent"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="hamburger">
            <span></span>
            <span></span>
            <span></span>
          </span>
        </button>

        <div class="collapse navbar-collapse header-contents" id="navbarSupportedContent">
          <ul class="navbar-nav menu">
            <li class="nav-item">
              <a class="nav-link" href="#">HOME</a>
            </li>
            <li class="nav-item dropdown">
              <a
                class="nav-link dropdown-toggle"
                href="#"
                id="navbarDropdown"
                role="button"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
              >
                CONCEPT
              </a>
              <div class="dropdown-menu dropdown-group" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">ブログアーカイブ</a>
                <a class="dropdown-item" href="#">お知らせアーカイブ</a>
                <a class="dropdown-item" href="#">イベントアーカイブ</a>
                <a class="dropdown-item" href="#">インタビューアーカイブ</a>
                <a class="dropdown-item" href="#">FAQページ</a>
                <a class="dropdown-item" href="#">固定ページ（デフォルト）</a>
                <a class="dropdown-item" href="#">CONCEPT</a>
                <a class="dropdown-item" href="#">SERVICE</a>
                <a class="dropdown-item" href="#">FLOOR</a>
                <a class="dropdown-item" href="#">ACCESS</a>
              </div>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">SERVICE</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">FLOOR</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">INTERVEIW</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">BLOG</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">ACCESS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">DOWNLOAD</a>
            </li>
          </ul>
        </div>
      </nav>
    </header>

    <main></main>
    <footer></footer>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

投稿2020/08/29 04:10

編集2020/08/29 09:25

sunglass

総合スコア303