英文:
I need to move down CheckBox a bit
问题
我的意图是让复选框与输入框和按钮居中对齐。
我尝试在 "form-check" 中使用 "align-center" 类，但不起作用。
有人可以为我提供一种方法吗？
以下是我的代码。
<form method="get" asp-controller="Permit" asp-action="FindPermitNumber" class="row g-3 mt-3">
@if (string.IsNullOrEmpty(Model.searchText))
{
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Number" name="searchText" />
</div>
}
else
{
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Number" value="@Model.searchText" name="searchText" />
</div>
}
<div class="col-md-3">
<div class="form-check align-center">
<input class="form-check-input" type="checkbox" id="autoSizingCheck" name="isActive" asp-for="@Model.isActive">
<label class="form-check-label" for="autoSizingCheck">
Cancel
</label>
</div>
</div>
<div class="col-md-3">
<button formmethod="get" class="btn btn-primary" asp-controller="Permit" asp-action="FindPermitNumber"><i class="fa-solid fa-magnifying-glass fa-lg"></i></button>
</div>
</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.
<form method="get" asp-controller="Permit" asp-action="FindPermitNumber" class="row g-3 mt-3">
@if (string.IsNullOrEmpty(Model.searchText))
{
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Number" name="searchText" />
</div>
}
else
{
<div class="col-md-3">
<input type="text" class="form-control" placeholder="Number" value="@Model.searchText" name="searchText" />
</div>
}
<div class="col-md-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck" name="isActive" asp-for="@Model.isActive">
<label class="form-check-label" for="autoSizingCheck">
Cancel
</label>
</div>
</div>
<div class="col-md-3">
<button formmethod="get" class="btn btn-primary" asp-controller="Permit" asp-action="FindPermitNumber"><i class="fa-solid fa-magnifying-glass fa-lg"></i></button>
</div>
</form>
答案1
得分: 2
您可以将.align-items-center类添加到您的form.row：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form method="get" class="row g-3 mt-3 align-items-center">
<div class="col-3">
<input type="text" class="form-control" placeholder="Number" />
</div>
<div class="col-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck" />
<label class="form-check-label" for="autoSizingCheck">
Cancel
</label>
</div>
</div>
</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 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<form method="get" class="row g-3 mt-3 align-items-center">
<div class="col-3">
<input type="text" class="form-control" placeholder="Number" />
</div>
<div class="col-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck" />
<label class="form-check-label" for="autoSizingCheck">
Cancel
</label>
</div>
</div>
</form>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论