Bootstrapを使用してのNav bar一列で表示させる方法について

Bootstrapを使っているのですが、以下のことで悩んでおります。

・Search textと search buttonが一列に表示されない
・Drop down button押下しても、Listが表示されない

お手数ではございますが、ご教授いただけないでしょうか。

<!DOCTYPE html>
<html lang="en">


<head>
	<meta charset="UTF-8">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	<link rel="stylesheet" href="css/Home.css">
	<title>Index</title>
</head>



<body class="Background">
	<header>
		<h1 class="headline">
			<a class="headline_color1">T</a><a class="headline_color2">est</a> <a class="headline_color1">I</a><a
				class="headline_color2">mplemantation</a>
		</h1>

		<nav class="navbar navbar-expand-lg navbar-light bg-light">
			<a class="navbar-brand" href="#">Test Tool</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="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarSupportedContent">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item">
						<a class="nav-link" href="#">Link</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">
							Dropdown
						</a>
						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
							<a class="dropdown-item" href="#">Action</a>
							<a class="dropdown-item" href="#">Another action</a>
							<div class="dropdown-divider"></div>
							<a class="dropdown-item" href="#">Something else here</a>
						</div>
					</li>
				</ul>
				<form class="form-inline my-2 my-lg-0">
					<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
					<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
				</form>
			</div>
		</nav>

		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
			integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
			crossorigin="anonymous"></script>
</body>

</html>

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

回答1件

ベストアンサー

Search textと search buttonが一列に表示されない

https://getbootstrap.com/docs/5.0/migration/#forms

Bootstrap5でform-inlineは廃止されているようなので、例えば以下のように書くことになるかと思います。

html
1<form class="d-flex">
2  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
3  <button class="btn btn-outline-success" type="submit">Search</button>
4</form>