Question

在我的下面View Bootstrap不允许扩展输入标签的宽度;此外，它将输入标签的标签和按钮与中心对齐，而不是将其与左对齐（就像它上面的下拉菜单一样）。我已经将Bootstrap的Grid列分发到4 + 7 + 1用于标签，输入和按钮。但即使我将此分布更改为3 + 8 + 1，输入标签的宽度也保持不变。问题：如何进行显示，使标签显示在最左侧，按钮显示在最右侧，输入标签显示整个空间在它的标签和Add按钮之间

查看：

<form asp-controller="TestContr" asp-action="TestAction" method="post" class="form-horizontal">
    <hr />
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-group">
        <div class="col-md-9">
            <label asp-for="SelectedYear" class="control-label"></label>
            <select asp-for="SelectedYear" asp-items="Model.lstYears"></select><button type="submit" name="submit" value="GO" class="btn btn-info btn-xs">GO</button>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="TestDesc" class="control-label col-sm-4"></label>
        <div>
            <input asp-for="TestDesc" class="form-control col-sm-7"/><button type="submit" name="submit" value="Add" class="btn btn-info btn-xs col-sm-1">Add</button>
            <span asp-validation-for="TestDesc" class="text-danger"></span>
        </div>
    </div>
</form>

显示以上视图的页面：

如果我在输入标记中添加内联样式style="width:300px;height:100px;"，它仍然不会增加宽度;它只增加高度，如下所示：

更新

在完成用户@MattSpinks的建议后，我可以将Add按钮与右侧对齐，并将标签对齐到左侧;但输入宽度保持不变，如下所示：

Answer 1

在asp-for="TestDesc"的输入中，您的col-sm-7位置错误。该类应该分配给它的父div。并且您的按钮也应该与父div一样处于相同的DOM级别。

<form asp-controller="TestContr" asp-action="TestAction" method="post" class="form-horizontal">
    <hr />
    <div asp-validation-summary="All" class="text-danger"></div>
    <div class="form-group">
        <div class="col-md-9">
            <label asp-for="SelectedYear" class="control-label"></label>
            <select asp-for="SelectedYear" asp-items="Model.lstYears"></select><button type="submit" name="submit" value="GO" class="btn btn-info btn-xs">GO</button>
        </div>
    </div>
    <div class="form-group">
        <label asp-for="TestDesc" class="control-label col-sm-4"></label>
        <div class="col-sm-7">
            <input asp-for="TestDesc" class="form-control"/>
            <span asp-validation-for="TestDesc" class="text-danger"></span>
        </div>
        <button type="submit" name="submit" value="Add" class="btn btn-info btn-xs col-sm-1">Add</button>
    </div>
</form>

要将标签对齐到左侧，请将text-align: left添加到控件标签类中：

.form-horizontal .control-label {
  text-align:left;
}

工作样本：https://jsfiddle.net/mspinks/9jevfug0/2/

asp.net Bootstrap不允许扩展输入标签的宽度

1 个答案: