我试着摆弄了一下填充物，但没有解决问题。
这个想法是把这些字段从它们所在的位置一直延伸到右边。
这是小提琴，这是它看起来如何VS它应该看起来像什么。
input[type='text'],
.txtarea {
margin-bottom: 3px;
}
.form-group input, select{
height: 36px;
padding-left: 03px;
padding-right: 03px;
}
.form-group {
margin-bottom: 2px !important;
}
.padding-0 {
padding-right: 0;
padding-left: 0;
}
label {
color: #292727;
font-weight: bold;
font-size: 13px;
width: 140px;
text-align: right;
}
label[for='notes'] {
font-size: 13px;
font-weight: bold;
text-align: left;
display: block;
}
.container-fluid {
max-width: 99%;
}<html>
<head>
<base target="_top">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<div class="container-fluid px-5" id="container1">
<div class="row d-flex flex-wrap align-items-center">
<div class="col">
<img src=class="header__logo-img" alt="Some Hidden Logo" itemprop="logo" width="237" height="90">
</div>
<div id="unitSpot" style="display: none;">Fabric</div>
<div class="col">
<form id="headerForm">
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="select" class="col-4 col-form-label">Order:</label>
<div class="col-4">
<select id="selectOrderPo" name="select" required="required" class="custom-select" onchange="loadSuppliersForPoFromSS(this);resetPage()">
<option value="TTL-220218" selected="">TTL-2131231</option>
</select>
</div>
</div>
<div class="form-group row" style="display: flex;justify-content: flex-end;">
<label for="fabricPo" class="col-4 col-form-label">PO:</label>
<div class="col-4">
<input id="fabricPo" name="fabricPo" type="text" required="required" value="" class="form-control" disabled="">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="poDate" class="col-4 col-form-label">PO Date:</label>
<div class="col-4">
<input id="poDate" name="poDate" type="date" required="required" class="form-control" placeholder="MM/dd/yyyy" onchange="generateShipDate(getLeadTime())">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="leadTime" class="col-4 col-form-label">Lead Time:</label>
<div class="col-4">
<input id="leadTime" name="leadTime" type="number" class="form-control" onchange="generateShipDate(this)" min="0" max="180">
</div>
</div>
<div class="form-group row" style="display: flex; justify-content: flex-end">
<label for="text3" class="col-4 col-form-label">Ship Date:</label>
<div class="col-4">
<input id="shipDate" name="shipDate" type="text" class="form-control" disabled="">
</div>
</div>
</form>
</div>
</div>
</div>
</html>
1条答案
按热度按时间rn0zuynd1#
你的容器上有
px-5，它指定了3rem的左右填充。第一步是删除它，因为container-fluid已经有了15px的左右填充。然后，当您沿着元素的方向工作时，您会注意到所有
col-4上都有一些更多的默认padding。您可以使用pr-0来仅将padding-right定位为0。