Bootstrap - 输入组插件标签宽度对齐
Posted
技术标签:
【中文标题】Bootstrap - 输入组插件标签宽度对齐【英文标题】：Bootstrap - input-group-addon labels width alignment 【发布时间】：2017-06-19 04:39:20 【问题描述】：您可以在下面看到我的输入组目前的情况。我希望labels 的宽度 相等
(fx. 标签占宽度的 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>
非常感谢任何帮助。提前致谢！
编辑：修复了我的表单组与输入组的组合 - 不再在同一个 div 中添加类
还添加了JSFiddle
【问题讨论】：
Bootstrap 的文档 specifically discourages combining input-group with other components - 我将从修复它开始。 @TiesonT。我现在修好了。我之前没有修复它的错误。实际上，在发布此内容之前，我已经阅读了该内容，但甚至没有意识到我没有在我的项目中修复它（尽管已修复）。但它并不能解决问题。向元素添加自定义样式仍然很奇怪，我找不到任何有完全相同问题的人，我正在寻求解决方案:) 【参考方案1】：在您的代码中添加一些 css 即可...
.input-group-addon
min-width:60%;
text-align:left;
工作代码 sn-p
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
.input-group-addon width: 60%; // Or whatever width you want
/*.input-group width: 100%;
</style>
</head>
<body>
<div class="col-md-6" style="text-align: center">
<div class="row">
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<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>
<div class="row">
<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>
</div>
</body>
</html>【讨论】：
由于没有更好的响应，我将使用这个。它做（有点做）我需要它做的事情。【参考方案2】：另一种改变标签宽度并达到预期效果的方法是添加html不间断空格&nbsp;，如下图：
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">Username </span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
这不是最优雅的解决方案，但如果您知道其局限性，则此方法在某些情况下会很方便。
【讨论】：
以上是关于Bootstrap - 输入组插件标签宽度对齐的主要内容，如果未能解决你的问题，请参考以下文章
两个输入相同的表单列采用所有单元格宽度 Bootstrap 3