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

Public Function test() RaiseEvent OnClientSelected End Function仅适用于超小屏幕

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

Col-xs-5，它将处理所有屏幕尺寸。

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

并将您的电子邮件div增加到

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

使用上述方法来确定网格的外观。还要在子网格中应用上述方法，即：

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

Answer 2

这是我为剑道控件所做的事情

首先创建一个CSS类，将宽度设置为100％：

macro_rules! my_macro {
    ($val:expr) => {
        format!("Hello {}", $val)
    }
}

然后将其添加到控件中：

.width100 {
    width: 100%;
}

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>

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

4 个答案: