<form>
<div class="row mb-3">
<label for="name" class="col-sm2 col-form-label col-form-label-sm">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="name" required>
</div>
</form>
這樣做似乎很簡單，但我無法讓它在輸入元素之前顯示標簽。標簽顯示在輸入元素上方。即使我直接從 bootstrap.com 復制示例，標簽仍然顯示在輸入上方而不是旁邊。
有關我使用的示例，請參見：https : //getbootstrap.com/docs/5.0/forms/layout/#horizo??ntal-form
引導程式版本 5.1.3
uj5u.com熱心網友回復：
你應該添加類col-sm-2而不是col-sm2
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<form>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label col-form-label-sm">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-sm" id="name" required />
</div>
</div>
</form>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/390305.html
標籤：html css bootstrap-5
上一篇：瀏覽器未請求自定義字體