如何“拉伸”容器中的表單組（Bootstrap 4）？
[英]How to "stretch" a form group in a container (Bootstrap 4)?
問題描述
我嘗試過使用填充物，但它並沒有解決問題。
我們的想法是將這些字段從它們所在的位置一直延伸到右側。
這是小提琴，這就是它的外觀 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 個解決方案
解決方案1
1 已采納 2022-08-23 20:12:09
您的容器上有px-5 ，它在左側和右側指定3rem的填充。 第一步是刪除它，因為container-fluid已經有15px的左右填充。
然后，當您沿着元素向下工作時，您會注意到所有col-4上的一些默認padding 。 您可以使用pr-0僅將padding-right定位為0 。
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" 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 pr-0"> <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 pr-0"> <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 pr-0"> <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 pr-0"> <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 pr-0"> <input id="shipDate" name="shipDate" type="text" class="form-control" disabled=""> </div> </div> </form> </div> </div> </div> </html>
如何在我的頁面上拉伸谷歌地圖以在引導程序中水平放置容器？
[英]How can I stretch the google map on my page to fit the container horizontally in bootstrap?
引導程序默認的填充和邊距導致圖像延伸到容器外部
[英]Bootstrap default padding and margin causing images to stretch outside the container
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.