在我的 div 类之间放置空间并对齐它们
Posted
技术标签:
【中文标题】在我的 div 类之间放置空间并对齐它们【英文标题】：Putting space between my div classes and align them 【发布时间】：2021-12-24 21:37:07 【问题描述】：我的页面和数据卡 ASP.Net Core 应用程序上几乎没有搜索过滤器。我正在尝试在页面上对齐它们，以便看起来更好。目前如下图所示
<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-* 的大小，但仍然无法像我尝试的那样对齐它们，非常感谢任何帮助
【问题讨论】：
【参考方案1】：<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>
【讨论】：
您能否举例说明它在您的屏幕上的显示方式 已更新，请查看 您是否尝试过偏移列？ getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns 非常感谢我再次更新了这个问题。显示它在我的屏幕上的显示方式。有没有办法可以修复最后一行 @Richie 我没试过，这是我的 ASP.NET 框架和引导的应用程序以上是关于在我的 div 类之间放置空间并对齐它们的主要内容，如果未能解决你的问题，请参考以下文章