如何使用引导程序更改输入字段的宽度

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

这是我为 Kendo 控件所做的：

首先创建一个css类来设置宽度为100%：

.width100 {
    width: 100%;
}

然后将其添加到控件中：

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

Answer 2

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

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

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

此外，您可以将 homezip 的 col-xs-5 减少到 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 类的引导网格示例：

您可以尝试的另一件事是输入大小：将 input-sm 类添加到您的输入元素中，以使它们更小并适合更多文本