如何使用 bootstrap 更改输入字段的宽度

Question

我尝试了几种方法来增加显示的电子邮件字段。可以看到，它被砍掉了，如果字段再长一点会更好看。

其背后的代码如下所示：

<div class="row">
  <div class="col-xs-5">
    <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
    <div class="col-md-4">
      @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
      @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
    </div>
  </div>    
  <div class="col-xs-5">
    <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
    <div class="col-md-4">
      @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
      @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
    </div>
  </div>    
</div>

我尝试将 div 的 col-md-4 更改为 col-md-5 或 div 的 6，我尝试将 col-xs-5 更改为更大的数字也是如此。

我认为我不需要将 col-md-4 更改为更大的标签数字。

为什么没有显示任何更改来扩大电子邮件字段？页面上有足够的空间。

我查看了 bootstrap examples，看起来我尝试的应该有效。

如何让电子邮件地址字段变宽？

更新根据@JustLearning 的建议回答，我试过这个：

<div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
            <div class="col-md-4">
                @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-xs-5 col-sm-5 col-lg-5">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-8 col-md-8 col-lg-8">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>

Answer 1

Col-xs-5仅适用于超小屏幕

所以你可以做的是链接另一个屏幕class例如：

col-xs-5 col-sm-5 col-md-5 col-lg-5 这将处理所有屏幕尺寸。

此外，您可以将col-xs-5的homezip缩减为 col-xs-4 col-sm-4 col-md-4 col-lg-4

并增加您的电子邮件 div 至

col-xs-8 col-md-8 col-lg-8

使用上述方法找出网格的外观。在子网格中也应用上述方法，即：

    <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
    <div class="col-md-4">
        @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
        @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
    </div>

使用 col-md classes 的 bootstrap 网格示例：

您可以尝试的另一件事是调整输入大小：向您的输入元素添加 class input-sm 以使其更小并适合更多文本

Answer 2

这是我为 Kendo 控件所做的：

首先创建一个 css class 以将宽度设置为 100%：

.width100 {
    width: 100%;
}

然后添加到控件中：

@Html.EditorFor(model => model.EmailAddress, 
    new { htmlAttributes = new { @class = "form-control width100", @required = "required" } })

Answer 3

将宽度添加到 100% 将解决该问题，如下所示...

<div class="row">
        <div class="col-xs-4 col-sm-4 col-md-4">
            <label class="control-label col-md-4 required" for="HomeZipCode">Home Zip Code:</label>
            <div class="col-md-4">
                @Html.EditorFor(model => model.HomeZipCode, new { htmlAttributes = new { @class = "form-control", @required = "required", @style="width:100%" } })
                @Html.ValidationMessageFor(model => model.HomeZipCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="col-xs-5 col-sm-5 col-lg-5">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-8 col-md-8 col-lg-8">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required", @style="width:100%" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
        </div>

    </div>

Answer 4

我最后将这个添加到 site.css:

#step1Edit #EmailAddress{
    width:23em;
}

然后在我的 RegistrationStep1.cshtml 中，我在外部添加了这个 div:

<div class="form-horizontal" id="step1Edit">

这与电子邮件标识符一起使用，没有任何变化：

<div class="col-xs-6 col-sm-6 col-lg-6">
            <label class="control-label col-md-4 required" for="EmailAddress">Email Address </label>
            <div class="col-xs-6 col-sm-6 col-md-auto col-lg-6">
                @Html.EditorFor(model => model.EmailAddress, new { htmlAttributes = new { @class = "form-control", @required = "required" } })
                @Html.ValidationMessageFor(model => model.EmailAddress, "", new { @class = "text-danger" })
            </div>
</div>

如何使用 bootstrap 更改输入字段的宽度

How to change width of an input field using bootstrap

model-view-controller

asp.net-mvc

razor

kendo-asp.net-mvc