Html 引导-输入组加载项标签宽度对齐

下面您可以看到我的输入组目前的状态。我希望

标签的宽度应相等

（fx.标签占宽度的25%，输入占宽度的25%
最后75%）

我曾尝试添加自定义CSS，但最终（出于某种原因）缩小了整个内容


我更愿意让它充满活力

（不是硬编码的px值，而是%值，因此如果您
窗户开得更小）

我的代码如下所示：

<div class="col-md-6" style="text-align: center">
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon">Område: </label>
      <select name="AreaId" asp-for="AreaId" class="form-control">
         <option disabled selected value=""> -- Vælg et område -- </option>          
            @foreach (var a in Model.Areas) {
               <option value="@a.ProfileID">@a.Name</option>
            }
      </select>
   </div>
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="ProductNumber">Varenummer: </label>
      <input name="ProductNumber" asp-for="ProductNumber" class="form-control" type="text" placeholder="Indtast varenummer" maxlength="8" />
   </div>
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="OrderNumber">Ordrenummer: </label>
      <input name="OrderNumber" asp-for="OrderNumber" class="form-control" type="text" placeholder="Indtast ordrenummer" />
   </div>
   <div class="input-group input-group-lg form-group">
      <label class="input-group-addon" asp-for="DateRange">Dato (Fra-Til): </label>
      <input id="daterange" name="DateRange" asp-for="DateRange" class="form-control" type="text" value="" placeholder="Klik i boksen og vælg til/fra dato" />
   </div>
</div>


欧姆雷德：
--Vælg et område--
@foreach（模型区域中的var a）{
@a、 名字
}
Varenummer：
奥德雷纽姆：
达托（弗拉蒂尔）：

非常感谢您的帮助。提前谢谢

编辑：修复了我的表单组与输入组的组合-不再在同一个div中添加类

还添加了一个
将一些css添加到您的代码中，它将起作用

.input-group-addon {
    min-width:60%;
    text-align:left;
}

工作代码段



.input组加载项{width:60%；}//或任意宽度
/*.输入组{宽度：100%；}
欧姆雷德：
--Vælg et område--
@foreach（模型区域中的var a）{
@a、 名字
}
Varenummer：
奥德雷纽姆：
达托（弗拉蒂尔）：
更改标签宽度并获得所需结果的另一种方法是添加html非中断空格
，如下所示：

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">Username &nbsp; &nbsp;</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>


用户名

这不是最优雅的解决方案，但如果您意识到这种方法的局限性，它在某些情况下会很方便。
Bootstrap的文档-我将首先修复它。@TiesonT。我现在修好了。我以前没修好的错误。事实上，我在发布这篇文章之前读到了这篇文章，但我甚至没有意识到我没有在我的项目中修复它（尽管已经修复）。但这并不能解决这个问题。将自定义样式添加到元素中仍然很麻烦，我还没有找到任何人有完全相同的问题，我正在寻求解决方案：）由于缺乏更好的响应，我将使用这个。它做了我需要的事情。