<label>和</label>的不同對齊方式<label><input></label><label>表單組內</label>
[英]Different alignments for <label> and <input> inside form-group
問題描述
是否可以在form-group內使用不同的對齊方式，我希望 label 在左側並在右側輸入， justify-content-start ， justify-content-center和justify-content-end在里面不起作用<div class="form-group">
<html lang="en"> <head> <title>Dashboard</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form method="POST"> <div class="table-responsive"> <table class="table table-borderless border border-dark"> <tbody> <tr class="d-flex"> <td class="col-6 border border-dark"> <div class="form-group form-inline justify-content-end"> <label for="del">DELIVERY NOTE NO. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-end"> <label for="date">Date. :</label> <input type="text" class="form-control" id="date" disabled> </div> <div class="form-group form-inline justify-content-end"> <label for="del">Purchase Order No. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-end"> <label for="del">Mode Of Despatch. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-end"> <label for="del">Vehicle No. :</label> <input type="text" class="form-control" id="del" disabled> </div> </td> <td class="col-6 border border-dark"> <div class="form-group form-inline justify-content-center"> <label for="del">DELIVERY NOTE NO. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-center"> <label for="date">Date. :</label> <input type="text" class="form-control" id="date" disabled> </div> <div class="form-group form-inline justify-content-center"> <label for="del">Purchase Order No. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-center"> <label for="del">Mode Of Despatch. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-center"> <label for="del">Vehicle No. :</label> <input type="text" class="form-control" id="del" disabled> </div> </td> </tr> </tbody> </table> </div> </form> </div> </body> </html>
3 個解決方案
解決方案1
1 2020-12-25 07:25:20
將form-group justify-content-end上的 Class 名稱更改為justify-content-between
<html lang="en"> <head> <title>Dashboard</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form method="POST"> <div class="table-responsive"> <table class="table table-borderless border border-dark"> <tbody> <tr class="d-flex"> <td class="col-6 border border-dark"> <div class="form-group form-inline justify-content-between"> <label for="del">DELIVERY NOTE NO. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-between"> <label for="date">Date. :</label> <input type="text" class="form-control" id="date" disabled> </div> <div class="form-group form-inline justify-content-between"> <label for="del">Purchase Order No. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-between"> <label for="del">Mode Of Despatch. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-between"> <label for="del">Vehicle No. :</label> <input type="text" class="form-control" id="del" disabled> </div> </td> <td class="col-6 border border-dark"> <div class="form-group form-inline justify-content-center"> <label for="del">DELIVERY NOTE NO. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-center"> <label for="date">Date. :</label> <input type="text" class="form-control" id="date" disabled> </div> <div class="form-group form-inline justify-content-center"> <label for="del">Purchase Order No. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-center"> <label for="del">Mode Of Despatch. :</label> <input type="text" class="form-control" id="del" disabled> </div> <div class="form-group form-inline justify-content-center"> <label for="del">Vehicle No. :</label> <input type="text" class="form-control" id="del" disabled> </div> </td> </tr> </tbody> </table> </div> </form> </div> </body> </html>
解決方案2
0 2020-12-25 07:33:04
您可以使用justify-content-between
試試下面的代碼
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="POST">
<div class="table-responsive">
<table class="table table-borderless border border-dark">
<tbody>
<tr class="d-flex">
<td class="col-6 border border-dark">
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="date">Date. :</label>
<input type="text" class="form-control" id="date" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
</td>
<td class="col-6 border border-dark">
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">DELIVERY NOTE NO. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="date">Date. :</label>
<input type="text" class="form-control" id="date" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Purchase Order No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Mode Of Despatch. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
<div class="form-group form-inline d-flex justify-content-between">
<label for="del">Vehicle No. :</label>
<input type="text" class="form-control" id="del" disabled>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</body>
</html>
解決方案3
0 2020-12-25 07:49:38
我們需要做兩件事。
- 在
.form-group上使用justify-content-between。 - 並且還為 label 和
.form-control賦予flex屬性，以便在用完之間的間距並使其看起來不錯。
@media (min-width: 576px) {.form-inline.form-control { display: inline-block; vertical-align: middle; flex: 8; }.form-inline label { display: inline-block; flex: 4; } }
<html lang="en"> <head> <title>Dashboard</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="./style.css" /> </head> <body> <div class="container"> <form method="POST"> <div class="table-responsive"> <table class="table table-borderless border border-dark"> <tbody> <tr class="d-flex"> <td class="col-6 border border-dark"> <div class="form-group d-flex form-inline justify-content-between" > <label for="del">DELIVERY NOTE NO. :</label> <input type="text" class="form-control" id="del" disabled /> </div> <div class="form-group d-flex form-inline justify-content-between" > <label for="date">Date. :</label> <input type="text" class="form-control" id="date" disabled /> </div> <div class="form-group d-flex form-inline justify-content-between" > <label for="del">Purchase Order No. :</label> <input type="text" class="form-control" id="del" disabled /> </div> <div class="form-group d-flex form-inline justify-content-between" > <label for="del">Mode Of Despatch. :</label> <input type="text" class="form-control" id="del" disabled /> </div> <div class="form-group d-flex form-inline justify-content-between" > <label for="del">Vehicle No. :</label> <input type="text" class="form-control" id="del" disabled /> </div> </td> <td class="col-6 border border-dark"> <div class="form-group d-flex form-inline justify-content-between" > <label for="del">DELIVERY NOTE NO. :</label> <input type="text" class="form-control" id="del" disabled /> </div> <div class="form-group d-flex form-inline justify-content-between" > <label for="date">Date. :</label> <input type="text" class="form-control" id="date" disabled /> </div> <div class="form-group d-flex form-inline justify-content-between" > <label for="del">Purchase Order No. :</label> <input type="text" class="form-control" id="del" disabled /> </div> <div class="form-group d-flex form-inline justify-content-between" > <label for="del">Mode Of Despatch. :</label> <input type="text" class="form-control" id="del" disabled /> </div> <div class="form-group d-flex form-inline justify-content-between" > <label for="del">Vehicle No. :</label> <input type="text" class="form-control" id="del" disabled /> </div> </td> </tr> </tbody> </table> </div> </form> </div> </body> </html>
如何在jQuery中隱藏帶有標簽的表單組輸入框？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.