我想讓我的輸入文本框和按鈕行內，但是如果我從 div 中洗掉 d-flex 類，我就無法通過將內容置于中心來證明其合理性。有什么想法可以使它們行內或證明內容合理？
這是我的代碼，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movies</title>
<!-- Bootstrap -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
<!-- css -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="bg-image shadow-2-strong">
<div class="mask">
<div
class="
container
d-flex
flex-column
align-items-center
justify-content-center
text-center
h-100
"
>
<div>
<h1 class="mb-3">THE MOVIE SCOPE!</h1>
<h5 class="mb-4">search with movie titles</h5>
<input type="text" class="form-control" required />
<form action="/" method="post">
<button type="submit" class="btn btn-outline-light btn-lg">
click
</button>
</form>
</div>
</div>
</div>
<footer>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">
? 2021 Copyright Danuja Jayasuriya
</div>
</footer>
</body>
</html>
這是現在的樣子， https://ibb.co/8jkG75K
uj5u.com熱心網友回復：
添加一個 div 以覆寫<input> and <form>class d-flex，添加填充或邊距以自定義文本框和按鈕之間的空間。比如我ms-4給按鈕加了div。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movies</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- css -->
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body class="bg-image shadow-2-strong">
<div class="mask">
<div class="container d-flex flex-column align-items-center justify-content-center text-center h-100">
<h1 class="mb-3">THE MOVIE SCOPE!</h1>
<h5 class="mb-4">search with movie titles</h5>
<div>
<div class="d-flex">
<input type="text" class="form-control" required />
<form action="/" method="post">
<button type="submit" class="btn btn-outline-light btn-lg ms-4">click</button>
</form>
</div>
</div>
</div>
</div>
<footer>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2)">? 2021 Copyright Danuja Jayasuriya</div>
</footer>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397292.html
標籤：html css bootstrap-5
上一篇：如何為每個選項卡添加圖示？
下一篇：使用CSS的語音氣泡