如何“拉伸”容器中的表單組（Bootstrap4）？-有解無憂

我嘗試過使用填充物，但它并沒有解決問題。

我們的想法是將這些欄位從它們所在的位置一直延伸到右側。

這是如何“拉伸”容器中的表單組（Bootstrap 4）？

 

  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/[email protected]/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>

uj5u.com熱心網友回復：

您px-5在容器上指定3rem了左右填充。第一步是洗掉它，因為container-fluid已經有15px.

然后，當您沿著元素向下作業時，您會注意到padding所有col-4's. 您只能使用pr-0to 來定位padding-rightto 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/[email protected]/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507480.html

標籤：html css 推特引导引导程序 4

上一篇：為了使boostrapcdn作業，我還需要javascriptcdn還是只需要css，還是全部3個？

下一篇：使用媒體查詢隱藏引導下拉選單