如何使用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

以下是我为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仅适用于超小屏幕

所以你可以做的是链接另一个屏幕类E.g：

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

此外，你可以减少你的qazxsw poi为家庭拉链到qazxsw poi

并增加你的电子邮件div

col-xs-5

使用上面的方法来确定网格应该是什么样子。在儿童网格中也应用上述方法，即：

col-xs-4 col-sm-4 col-md-4 col-lg-4

使用col-xs-8 col-md-8 col-lg-8类的bootstrap网格示例：

    <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添加到输入元素以使它们更小并适合更多文本

Answer 3

添加宽度为100％将解决该问题如下...

Answer 4

我把它添加到site.css：

input-sm

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

<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>

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

#step1Edit #EmailAddress{
    width:23em;
}