将 space 放在我的 div 类 之间并对齐它们
Putting space between my div classes and align them
我的页面上有几个搜索过滤器和一个数据卡 ASP.Net 核心应用程序。我正在尝试将它们在页面上对齐，以便看起来更好。目前看起来像下面
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
@Html.DisplayFor(model => model.CustomerData.Location)
<br />@Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-5 col-md-2 col-sm-12 p-0">
<label for="name" class="">Strain Name</label>
<input class="" type="text" name="name" value="@ViewData["name"]" />
</div>
<div class="col-lg-4 col-md-2 col-sm-12 p-0">
<label for="genotype" class="">Genotype</label>
<input class="" type="text" name="genotype" value="@ViewData["genotype"]" />
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="age" class="">Age</label>
<select class="" name="age">
......
</select>
</div>
<div class="col-lg-6 col-md-2 col-sm-12 p-0">
<label for="minAge">Age range between</label>
<select name="minAge">
.......
</select>
and
<select name="maxAge">
........
</select>
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="sex">Sex</label>
<select name="sex">
......
</select>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<div class="form-group form-actions col-md-10 no-color">
<label for="stockNumber">Find by Stock Number</label>
<input type="text" name="stockNumber" value="@ViewData["stockNumber"]" />
</div>
</div>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
我正在尝试将数据卡放在左侧，并在右侧对齐搜索过滤器 2 排成 3 行显示。
我尝试更改过滤器每一行中 col-lg-* 的大小，但仍然无法像我正在尝试的那样对齐它们，非常感谢任何帮助
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
@Html.DisplayFor(model => model.CustomerData.Location)
<br />@Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="name" class="col-auto">Strain Name</label>
<input class="form-control" type="text" name="name" value="@ViewData["name"]" />
</div>
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="genotype" class="col-auto">Genotype</label>
<input class="form-control" type="text" name="genotype" value="@ViewData["genotype"]" />
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-2 col-sm-12 form-check-inline m-0">
<label for="age" class="col-auto" >Age</label>
<select class="form-control px-1" name="age">
<option>-Any-</option>
</select>
</div>
<div class="col-lg-9 col-md-2 col-sm-12 form-check-inline m-0 justify-content-between">
<label class="col-auto" for="minAge">Age range between</label>
<select class="form-control" name="minAge">
<option>-Start-</option>
</select>
<label class="col-auto" for="minAge">and</label>
<select class="form-control" name="maxAge">
<option>-End-</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="sex">Sex</label>
<select class="form-control px-1" name="sex">
<option>-Either-</option>
</select>
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="stockNumber">Find by Stock Number</label>
<input type="text" class="form-control" name="stockNumber" value="@ViewData["stockNumber"]" />
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
我的页面上有几个搜索过滤器和一个数据卡 ASP.Net 核心应用程序。我正在尝试将它们在页面上对齐，以便看起来更好。目前看起来像下面
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
@Html.DisplayFor(model => model.CustomerData.Location)
<br />@Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-5 col-md-2 col-sm-12 p-0">
<label for="name" class="">Strain Name</label>
<input class="" type="text" name="name" value="@ViewData["name"]" />
</div>
<div class="col-lg-4 col-md-2 col-sm-12 p-0">
<label for="genotype" class="">Genotype</label>
<input class="" type="text" name="genotype" value="@ViewData["genotype"]" />
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="age" class="">Age</label>
<select class="" name="age">
......
</select>
</div>
<div class="col-lg-6 col-md-2 col-sm-12 p-0">
<label for="minAge">Age range between</label>
<select name="minAge">
.......
</select>
and
<select name="maxAge">
........
</select>
</div>
</div>
<div class="form-row">
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<label for="sex">Sex</label>
<select name="sex">
......
</select>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<div class="form-group form-actions col-md-10 no-color">
<label for="stockNumber">Find by Stock Number</label>
<input type="text" name="stockNumber" value="@ViewData["stockNumber"]" />
</div>
</div>
</div>
<div class="col-lg-3 col-md-2 col-sm-12 p-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>
我正在尝试将数据卡放在左侧，并在右侧对齐搜索过滤器 2 排成 3 行显示。
我尝试更改过滤器每一行中 col-lg-* 的大小，但仍然无法像我正在尝试的那样对齐它们，非常感谢任何帮助
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="card border-info mb-3" style="max-width: 12rem;">
<div class="card-header text-center"><b>Current Shipping Address</b></div>
<div class="card-body text-info" style="font-size: 14px;">
<b><h7 class="card-title">Location</h7></b>
<p class="card-text">
@Html.DisplayFor(model => model.CustomerData.Location)
<br />@Html.DisplayFor(model => model.CustomerData.Address1)
</p>
</div>
</div>
</div>
<div class="col-md-9">
<section class="search-sec">
<div class="container-fluid">
<form asp-action="Index" method="get">
<div class="row">
<div class="col-lg-12">
<div class="row mb-3">
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="name" class="col-auto">Strain Name</label>
<input class="form-control" type="text" name="name" value="@ViewData["name"]" />
</div>
<div class="col-lg-6 col-md-2 form-check-inline mr-0">
<label for="genotype" class="col-auto">Genotype</label>
<input class="form-control" type="text" name="genotype" value="@ViewData["genotype"]" />
</div>
</div>
<div class="row mb-3">
<div class="col-lg-3 col-md-2 col-sm-12 form-check-inline m-0">
<label for="age" class="col-auto" >Age</label>
<select class="form-control px-1" name="age">
<option>-Any-</option>
</select>
</div>
<div class="col-lg-9 col-md-2 col-sm-12 form-check-inline m-0 justify-content-between">
<label class="col-auto" for="minAge">Age range between</label>
<select class="form-control" name="minAge">
<option>-Start-</option>
</select>
<label class="col-auto" for="minAge">and</label>
<select class="form-control" name="maxAge">
<option>-End-</option>
</select>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="sex">Sex</label>
<select class="form-control px-1" name="sex">
<option>-Either-</option>
</select>
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<label class="col-auto" for="stockNumber">Find by Stock Number</label>
<input type="text" class="form-control" name="stockNumber" value="@ViewData["stockNumber"]" />
</div>
<div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
<input type="submit" value="Search" class="btn btn-default" /> |
<a class="btn btn-link" asp-action="Index">Return to Original List</a>
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
</div>