bootstrapのドロップダウンメニューがレスポンシブされない。

該当のソースコード

HTML
1<header>
2
3		<nav class="navbar navbar-expand-lg navbar-light bg-light">
4			<div class="container header-text">
5			 <h1>
6				<p class="navbar-brand">Yuki</p>
7			 </h1>
8			 <div class="btn-group">
9				<button type="button"
10						class="btn-secondary dropdown-toggle dropdown-toggle-split"
11						data-toggle="dropdown"
12						aria-haspopup="true"
13						aria-expanded="false">
14					<span class="sr-only">Toggle Dropdown</span>
15				</button>
16				<div class="dropdown-menu">
17					<a class="dropdown-item" href="#home">home</a>
18					<a class="dropdown-item" href="#about">about</a>
19					<a class="dropdown-item" href="#picture">picture</a>
20					<a class="dropdown-item" href="#work">work</a>
21					<a class="dropdown-item" href="#service">service</a>
22					<a class="dropdown-item" href="#price">price</a>
23					<a class="dropdown-item" href="#contact">contact</a>
24				</div>
25			</div>
26
27			 <div class="collapse navbar-collapse" id="Navbar">
28				<ul class="nav nav-pills flex-column flex-lg-row ml-auto">
29			 <li class="nav-item"><a class="nav-link" href="#home">home</a></li>
30			 <li class="nav-item"><a class="nav-link" href="#about">about</a></li>
31			 <li class="nav-item"><a class="nav-link" href="#picture">picture</a></li>
32			 <li class="nav-item"><a class="nav-link" href="#work">work</a></li>
33			 <li class="nav-item"><a class="nav-link" href="#service">service</a></li>
34			 <li class="nav-item"><a class="nav-link" href="#price">price</a></li>
35			 <li class="nav-item"><a class="nav-link" href="#contact">contact</a></li>
36				</ul>
37			 </div>
38			</div>
39		 </nav>
40
41	</header>

SCSS
1.btn-group {
2  display: none;
3  @include tablet() {
4    display: block;
5  }
6}
7
8.dropdown-menu {
9  @include mobile(){
10    right: 0;
11    position: absolute;
12    top: 100%;
13    z-index: 1000;
14    display: none;
15    float: left;
16    min-width: 10rem;
17    padding: .5rem 0;
18    margin: .125rem 0 0;
19    font-size: 1rem;
20    color: #212529;
21    text-align: left;
22    list-style: none;
23    background-color: #fff;
24    background-clip: padding-box;
25    border: 1px solid rgba(0,0,0,.15);
26    border-radius: .25rem;
27  }
28}

2ckD

2020/11/12 15:19

うまく動かないときは最小構成で動かすのが基本です。質問するときも然り。しかし、必要なところまで省略してしまうと、原因が下記のような初歩的なミスに起因するという可能性を捨てきれない。 1)Bootstrapに必要なCSS、jsファイルがインポートされていない 2)SCSSのままでCSSにコンパイルしていない回答者がつかないのはそういった理由で答えにくい(手間がかかる)からです。私の経験上1)じゃないかと思いますが、解決できていないなら質問文の見直しをおすすめします。