Html 引导4折叠在切换时扩展div宽度_Html_Css_Twitter Bootstrap_Bootstrap 4

Html 引导4折叠在切换时扩展div宽度

html css twitter-bootstrap bootstrap-4

Html 引导4折叠在切换时扩展div宽度,html,css,twitter-bootstrap,bootstrap-4,Html,Css,Twitter Bootstrap,Bootstrap 4,我正在使用标记帮助器在引导中创建一个表单。但是，我有一个折叠部分，当用户切换折叠时，表单的宽度将调整大小，从而产生一些丑陋的用户体验。我不知道为什么当用户展开或折叠时宽度会改变下面是这个问题的例子项目子项目建筑GSF 通货违约美元日元欧元比索英镑估计日期精度范围低 - 百分比范围低是必需的。高 + 百分比范围高是必需的。估计类违约第二类第三类第一类单位成本违约每键成本每床费用每个座位的费用每个工作站的成本每千瓦时使用成本每千瓦时发电成本

我正在使用标记帮助器在引导中创建一个表单。但是，我有一个折叠部分，当用户切换折叠时，表单的宽度将调整大小，从而产生一些丑陋的用户体验。我不知道为什么当用户展开或折叠时宽度会改变

下面是这个问题的例子


项目
子项目
建筑GSF
通货
违约
美元
日元
欧元
比索
英镑
估计日期
精度范围
低
- 
百分比范围低是必需的。
高
+ 
百分比范围高是必需的。
估计类
违约
第二类
第三类
第一类
单位成本
违约
每键成本
每床费用
每个座位的费用
每个工作站的成本
每千瓦时使用成本
每千瓦时发电成本
不适用
量
项目说明
测试说明
区域
违约
美国西北部
美国西南部
大不列颠联合王国
国家
请提供有效的国家/地区。
陈述
请提供有效状态。
城市
请提供一个有效的城市。
接触点
第二接触点

请记住，这些问题应该对未来的读者有所帮助。请在问题中发布相关代码，而不是链接到可能随时间变化的外部网站。好的电话。添加了html。THX您需要定义主容器的宽度。在此行中添加

.container

类<代码>哇，太棒了。谢谢这背后的逻辑是什么？我有上面定义的容器流体。为什么还需要一个容器呢？

<html>
<body>
<div class="container-fluid body-content">
<form action="/UpdateHeader" method="post">
  <div class="container-fluid mt-2">
    <div class="d-flex justify-content-center">
      <div class="p-4 mt-sm-4 mb-sm-4 border border-light" style="border-width: .2rem !important"> 

        <!--Project and Sub Project-->
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="ProjectName">Project</label>
            <input type="text" class="form-control" id="ProjectName" name="ProjectName" value="Foo">
          </div>
          <div class="form-group col-md-6">
            <label for="SubProjectName">Sub Project</label>
            <input type="text" class="form-control" id="SubProjectName" name="SubProjectName" value="Bar">
          </div>
        </div>
        <!--Building GSF, Currency, and Estimate Date-->
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="BuildingGSF">Building GSF</label>
            <input type="number" class="form-control" data-val="true" data-val-number="The field Building GSF must be a number." data-val-required="The Building GSF field is required." id="BuildingGSF" name="BuildingGSF" value="3570.00">
          </div>
          <div class="form-group col-md-4">
            <label for="Currency">Currency</label>
            <select class="form-control" required data-val="true" data-val-required="The CurrencyID field is required." id="Currency_CurrencyID" name="Currency.CurrencyID">
              <option value="Dollar" selected>Default</option>
              <option selected="selected" value="1">Dollar</option>
              <option value="2">Yen</option>
              <option value="3">Euro</option>
              <option value="4">Peso</option>
              <option value="5">Pound</option>
            </select>
          </div>
          <div class="form-group col-md-4">
            <label for="EstimateDate">Estimate Date</label>
            <input type="date" class="form-control" data-val="true" data-val-required="The Estimate Date field is required." id="EstimateDate" name="EstimateDate" value="01/01/0001">
          </div>
        </div>

        <!--Accuracy Range and Estimate Class-->
        <div class="form-row">
          <div class="mb-3 col-md-6">
            <label>Accuracy Range</label>
            <div class="row">
              <label class="col-lg-1 col-form-label d-none d-lg-block text-nowrap text-right">Low</label>
              <div class="col-lg-5 col-sm-6">
                <div class="input-group">
                  <div class="input-group-prepend"> <span class="input-group-text">-</span> </div>
                  <input type="number" class="form-control" data-val="true" data-val-number="The field Cost Range Low (%) must be a number." data-val-required="The Cost Range Low (%) field is required." id="CostPercentRangeLow" name="CostPercentRangeLow" placeholder="Cost Range Low (%)"
                            value="0.05">
                  <div class="invalid-feedback"> Percent range low is required. </div>
                </div>
              </div>
              <label class="col-lg-1 col-form-label d-none d-lg-block text-nowrap text-right">High</label>
              <div class="col-lg-5 col-sm-6">
                <div class="input-group">
                  <div class="input-group-prepend"> <span class="input-group-text">+</span> </div>
                  <input type="number" class="form-control" data-val="true" data-val-number="The field Cost Range High (%) must be a number." data-val-required="The Cost Range High (%) field is required." id="CostPercentRangeHigh" name="CostPercentRangeHigh" placeholder="Cost Range High (%)"
                            value="0.20">
                  <div class="invalid-feedback"> Percent range high is required. </div>
                </div>
              </div>
            </div>
          </div>
          <div class="form-group col-md-6">
            <label for="EstimateClass">Estimate Class</label>
            <select class="form-control" required data-val="true" data-val-required="The ID field is required." id="EstimateClass_ID" name="EstimateClass.ID">
              <option value="Class 2" selected>Default</option>
              <option selected="selected" value="22">Class 2</option>
              <option value="23">Class 3</option>
              <option value="25">Class 1</option>
            </select>
          </div>
        </div>

        <!--Unit cost and qty-->
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="ProjectTypeMetricID">Unit Cost</label>
            <select class="form-control" required data-val="true" data-val-required="The ID field is required." id="ProjectTypeMetricID_ID" name="ProjectTypeMetricID.ID">
              <option value="Cost Per Seat" selected>Default</option>
              <option value="26">Cost Per Key</option>
              <option value="27">Cost Per Bed</option>
              <option selected="selected" value="28">Cost Per Seat</option>
              <option value="29">Cost Per Workstation</option>
              <option value="30">Cost Per KWh Used</option>
              <option value="31">Cost Per KWh Generated</option>
              <option value="32">N/A</option>
            </select>
          </div>
          <div class="form-group col-md-6">
            <label for="MetricQty">Quantity</label>
            <input type="number" class="form-control" data-val="true" data-val-number="The field Quantity must be a number." id="MetricQty" name="MetricQty" value="1000.00">
          </div>
        </div>

        <!--Project desc-->
        <div class="form-row">
          <div class="form-group col-md-12">
            <label for="ProjectDesc">Project Description</label>
            <textarea type="text" class="form-control" rows="3" id="ProjectDesc" name="ProjectDesc" placeholder="Enter a project description">
    Test desc</textarea>
          </div>
        </div>
        <div class="optional-fields mb-2 border-bottom"> <a class="font-weight-bold" data-toggle="collapse" href="#optional-fields" aria-expanded="true" aria-controls="optional-fields"> <i class="fa fa-chevron-down pull-right pb-1"></i> Optional fields </a> </div>
        <div class="collapse show mt-2 mb-2 border-bottom" id="optional-fields"> 

          <!--Location data-->
          <div class="form-row">
            <div class="form-group col-md-2">
              <label for="Region">Region</label>
              <select class="form-control" required data-val="true" data-val-required="The ID field is required." id="Region_ID" name="Region.ID">
                <option value="Default" selected>Default</option>
                <option value="4">Nothrwest USA</option>
                <option value="5">Southwest USA</option>
                <option value="6">United Kingdom</option>
              </select>
            </div>
            <div class="form-group col-md-4">
              <label for="ProjectCountry">Country</label>
              <input type="text" class="form-control" id="ProjectCountry" name="ProjectCountry" placeholder="Country" value="">
              <div class="invalid-feedback"> Please provide a valid country. </div>
            </div>
            <div class="form-group col-md-2">
              <label for="ProjectState">State</label>
              <input type="text" class="form-control" id="ProjectState" name="ProjectState" placeholder="State" value="">
              <div class="invalid-feedback"> Please provide a valid state. </div>
            </div>
            <div class="form-group col-md-4">
              <label for="ProjectCity">City</label>
              <input type="text" class="form-control" id="ProjectCity" name="ProjectCity" placeholder="City" value="">
              <div class="invalid-feedback"> Please provide a valid city. </div>
            </div>
          </div>

          <!--Who data-->
          <div class="form-row">
            <div class="form-group col-md-6">
              <label for="PointOfContact">Point of Contact</label>
              <input type="text" class="form-control" id="PointOfContact" name="PointOfContact" placeholder="John Doe" value="">
            </div>
            <div class="form-group col-md-6">
              <label for="OtherPointOfContact">Secondary Point of Contact</label>
              <input type="text" class="form-control" id="OtherPointOfContact" name="OtherPointOfContact" value="">
            </div>
          </div>
        </div>
        <input type="submit" id="SubmitForm" value="Update" class="btn btn-primary" />
      </div>
    </div>
  </div>
</form>
</body>
</html>