需要将复选框下移一点。

huangapple
go评论92阅读模式
英文:

I need to move down CheckBox a bit

问题

我的意图是让复选框与输入框和按钮居中对齐。
我尝试在 "form-check" 中使用 "align-center" 类，但不起作用。
有人可以为我提供一种方法吗？
以下是我的代码。

  1. <form method="get" asp-controller="Permit" asp-action="FindPermitNumber" class="row g-3 mt-3">   
  2. 	@if (string.IsNullOrEmpty(Model.searchText))
  3. 	{
  4. 		<div class="col-md-3">
  5. 			<input type="text" class="form-control" placeholder="Number" name="searchText" />
  6. 		</div>
  7. 	}
  8. 	else
  9. 	{
  10. 		<div class="col-md-3">
  11. 			<input type="text" class="form-control" placeholder="Number" value="@Model.searchText" name="searchText" />
  12. 		</div>
  13. 	}
  15. 	<div class="col-md-3">
  16. 		<div class="form-check align-center">
  17. 			<input class="form-check-input" type="checkbox" id="autoSizingCheck" name="isActive" asp-for="@Model.isActive">
  18. 			<label class="form-check-label" for="autoSizingCheck">
  19. 				Cancel
  20. 			</label>
  21. 		</div>
  22. 	</div>       
  24. 	<div class="col-md-3">
  25. 		<button formmethod="get" class="btn btn-primary" asp-controller="Permit" asp-action="FindPermitNumber"><i class="fa-solid fa-magnifying-glass fa-lg"></i></button>
  26. 	</div>
  27. </form>
英文:

需要将复选框下移一点。
My intention is to have the checkbox aligned in the middle of Input and Button.
I try to use class align-center in "form-check" but not work.
Can anyone suggest a way for me?
This below is my code.

  1. &lt;form method=&quot;get&quot; asp-controller=&quot;Permit&quot; asp-action=&quot;FindPermitNumber&quot; class=&quot;row g-3 mt-3&quot;&gt;   
  2. @if (string.IsNullOrEmpty(Model.searchText))
  3. {
  4. 	&lt;div class=&quot;col-md-3&quot;&gt;
  5. 		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Number&quot; name=&quot;searchText&quot; /&gt;
  6. 	&lt;/div&gt;
  7. }
  8. else
  9. {
  10. 	&lt;div class=&quot;col-md-3&quot;&gt;
  11. 		&lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Number&quot; value=&quot;@Model.searchText&quot; name=&quot;searchText&quot; /&gt;
  12. 	&lt;/div&gt;
  13. }
  15. &lt;div class=&quot;col-md-3&quot;&gt;
  16. 	&lt;div class=&quot;form-check&quot;&gt;
  17. 		&lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; id=&quot;autoSizingCheck&quot; name=&quot;isActive&quot; asp-for=&quot;@Model.isActive&quot;&gt;
  18. 		&lt;label class=&quot;form-check-label&quot; for=&quot;autoSizingCheck&quot;&gt;
  19. 			Cancel
  20. 		&lt;/label&gt;
  21. 	&lt;/div&gt;
  22. &lt;/div&gt;       
  24. &lt;div class=&quot;col-md-3&quot;&gt;
  25. 	&lt;button formmethod=&quot;get&quot; class=&quot;btn btn-primary&quot; asp-controller=&quot;Permit&quot; asp-action=&quot;FindPermitNumber&quot;&gt;&lt;i class=&quot;fa-solid fa-magnifying-glass fa-lg&quot;&gt;&lt;/i&gt;&lt;/button&gt;
  26. &lt;/div&gt;

</form>

答案1

得分: 2

您可以将.align-items-center类添加到您的form.row：

  1. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  2. <form method="get" class="row g-3 mt-3 align-items-center">   
  3.   <div class="col-3">
  4.       <input type="text" class="form-control" placeholder="Number" />
  5.   </div>
  7.   <div class="col-3">
  8.       <div class="form-check">
  9.           <input class="form-check-input" type="checkbox" id="autoSizingCheck" />
  10.           <label class="form-check-label" for="autoSizingCheck">
  11.               Cancel
  12.           </label>
  13.       </div>
  14.   </div>
  15. </form>
英文:

You can add the .align-items-center class to your form.row :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC&quot; crossorigin=&quot;anonymous&quot;&gt;
  2. &lt;form method=&quot;get&quot; class=&quot;row g-3 mt-3 align-items-center&quot;&gt;   
  3.   &lt;div class=&quot;col-3&quot;&gt;
  4.       &lt;input type=&quot;text&quot; class=&quot;form-control&quot; placeholder=&quot;Number&quot; /&gt;
  5.   &lt;/div&gt;
  7.   &lt;div class=&quot;col-3&quot;&gt;
  8.       &lt;div class=&quot;form-check&quot;&gt;
  9.           &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; id=&quot;autoSizingCheck&quot; /&gt;
  10.           &lt;label class=&quot;form-check-label&quot; for=&quot;autoSizingCheck&quot;&gt;
  11.               Cancel
  12.           &lt;/label&gt;
  13.       &lt;/div&gt;
  14.   &lt;/div&gt;
  15. &lt;/form&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月19日 17:37:14
  • 转载请务必保留本文链接：https://go.coder-hub.com/76505382.html
  • bootstrap-5
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定