如何解决对齐引导程序列以使其落在同一行的另一列之上Bootstrap 4
我正在尝试将引导栏与“测试”对齐，使其位于“构建信息”栏的下方，但它仅位于屏幕底部。我只是不知道如何实现这一目标。我遵循了许多教程，但总是以左下角结尾。有人可以帮忙吗？谢谢。
这是我的代码...
<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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
