问题描述
我正在尝试将引导栏与“测试”对齐，使其位于“构建信息”栏的下方，但它仅位于屏幕底部。我只是不知道如何实现这一目标。我遵循了许多教程，但总是以左下角结尾。有人可以帮忙吗？谢谢。
这是我的代码...
<div class="row">
<div class="col-lg-7">
<div class="card w-100">
<h5 class="card-header">Single Stage Terminal</h5>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Order Number:
</div>
<div class="col-sm-8">
<strong>@Model.OrderNumber</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Stage:
</div>
<div class="col-sm-8">
<strong> @Model.Stage</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Item Number:
</div>
<div class="col-sm-8">
<strong> @Model.ItemNumber</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Description:
</div>
<div class="col-sm-8">
<strong> @Model.Description</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Build Standard:
</div>
<div class="col-sm-8">
<strong> @Model.BuildStandard</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Priority:
</div>
<div class="col-sm-8">
<strong> @Model.Priority</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Process Trial:
</div>
<div class="col-sm-8">
<strong> @Model.Processtrial</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Parent Item:
</div>
<div class="col-sm-8">
<strong> @Model.ParentItem </strong><b style="color:forestgreen; margin-left:50px;">@Model.LeadFree</b>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-4" style="font-weight:bolder">
Order Status:
</div>
<span class="br"></span>
<div class="col-sm-8">
<strong> @Model.OrderStatus</strong>
</div>
</div>
<div class="card-body w-100 border" style="margin-right:1px;">
<span class="blinking" style="color:red; margin-left:1px;">@Model.WarningCheck</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="card w-100">
<h5 class="card-header">Build information</h5>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
DR Order Quantity:
</div>
<div class="col-sm-6">
<strong style="text-align:center">@Model.DrOrderQty</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Allocated:
</div>
<div class="col-sm-6">
<strong> @Model.Allocated</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Scanned Quantity:
</div>
<div class="col-sm-6">
<strong> @Model.ScannedQty</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Remaining:
</div>
<div class="col-sm-6">
<strong> @Model.Remaining</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Total Std Hours:
</div>
<div class="col-sm-6">
<strong> @Model.TotalStdHrs</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Schedule:
</div>
<div class="col-sm-6">
<strong> @Model.Ok</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5">
<div class="card w-100">
<h5 class="card-header">TEST</h5>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
DR Order Quantity:
</div>
<div class="col-sm-6">
<strong style="text-align:center">@Model.DrOrderQty</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Allocated:
</div>
<div class="col-sm-6">
<strong> @Model.Allocated</strong>
</div>
</div>
<span class="br"></span>
</div>
</div>
</div>
</div>
</div>
我也将测试列放到新行中，并在行的两端添加justify-content-end，但这只是将我的文本列放在右侧，但在两个元素之下
解决方法
我设法解决了这个问题，我只需要在列中添加一个嵌套行
<div class="col-lg-5">
<div class="card w-100">
<h5 class="card-header">Build Information</h5>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
DR Order Quantity:
</div>
<div class="col-sm-6">
<strong style="text-align:center">@Model.DrOrderQty</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Allocated:
</div>
<div class="col-sm-6">
<strong> @Model.Allocated</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Scanned Quantity:
</div>
<div class="col-sm-6">
<strong> @Model.ScannedQty</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Remaining:
</div>
<div class="col-sm-6">
<strong> @Model.Remaining</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Total Std Hours:
</div>
<div class="col-sm-6">
<strong> @Model.TotalStdHrs</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Schedule:
</div>
<div class="col-sm-6">
<strong> @Model.Ok</strong>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="card w-100">
<h5 class="card-header">TEST</h5>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
DR Order Quantity:
</div>
<div class="col-sm-6">
<strong style="text-align:center">@Model.DrOrderQty</strong>
</div>
</div>
<span class="br"></span>
<div class="row">
<div class="col-sm-6" style="font-weight:bolder">
Allocated:
</div>
<div class="col-sm-6">
<strong> @Model.Allocated</strong>
</div>
</div>
<span class="br"></span>
</div>
</div>
</div>
</div>
</div>