您可以在下面看到我的输入组目前的情况。我希望标签的宽度相等
(fx. the label takes up 25% of the width, and the input takes up the last 75%)
我曾尝试添加自定义 CSS，但最终(出于某种原因)缩小了整个内容。
我更愿意让它动态化
(as in not hardcoded px values, but % values, so it scales if you make the window smaller).
我的代码如下所示:
<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>
非常感谢任何帮助。提前致谢!
编辑:修复了我的 form-group 与 input-group 的组合 - 这些类不再添加到同一个 div
还添加了一个JSFiddle
最佳答案
在你的代码中添加一些 css 它会起作用......
.input-group-addon {
min-width:60%;
text-align:left;
}
工作代码片段
<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>关于html - Bootstrap - 输入组插件标签宽度对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41996618/