增加文本框大小引导程序（ASP.NET MVC）

Question

有没有办法以水平形式增加文本框的大小（长度）？

<div class="form-horizontal">
    <div class="form-group">
        @Html.LabelFor(model => model.Name, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
                @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Name)
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    </div>
</div>

我试过改变col-md-*类，但它没有奏效。

Answer 1

另一种方法是只更改div上的col-md-x类，它将文本框和验证消息包装到所需的宽度。

例如，改变这个：

<div class="col-md-10">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

对此：

<div class="col-md-5">
     @Html.TextBoxFor(model => model.Name, new { @class = "form-control" })
     @Html.ValidationMessageFor(model => model.Name)
</div>

现在你的文本框将是5列宽而不是10.这不需要额外的类，并且额外的好处是，如果你有更长的验证消息，它将包装在与文本框相同的空间内。

Answer 2

最好的解决方案

在MVC C＃项目中转到：内容文件夹> site.css

并以css样式更改输出选择textarea的max-width

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 100%;
}

**它会工作**

Answer 3

所有答案都很有帮助。

我的解决方案是更改我的css中的默认最大宽度，因为它限制了大小

input, select, textarea {
    max-width: 500px;
}

然后更改col-md- *类工作正常。

谢谢

Answer 4

我会在你的文本框中添加一个类：

 @Html.TextBoxFor(model => model.Name, new { @class = "form-control long-textbox" })

然后在CSS中设置样式：

.long-textbox{
    width:300px;
}

你可以使用size属性，但我觉得这更像是一种风格，应该在CSS中管理。

Answer 5

通常你的标签有一个最大宽度字段集。如果你改成它

text {
    max-width: 100%;
    width: 100%;
}

那么你可以实现完整的可用宽度。如果您针对多个设备分辨率进行此操作，那么最好使用百分比宽度而不是使用px中的固定宽度。希望这对你有所帮助。

Answer 6

在Bootstrap 3中，form-control类将input元素设置为容器的100％。

或者，您可以手动应用自己的风格：

@Html.TextBoxFor(model => model.Name, new { @class = "wide-control" })

像这样的CSS：

input.wide-control {
    width: 300px;
}

Answer 7

使用HTML INPUT“大小”属性。

例：

@Html.TextBoxFor(model => model.Name, new { @class = "form-control", size="15" })
@Html.TextBoxFor(model => model.Other, new { @class = "form-control", size="25" })

Answer 8

您可以使用文本框并将style属性与new关键字一起使用，如下所示

@Html.TextBoxFor(model => model.Detail, new { style = "width:600px" })

它也可以用于LabelFor

@Html.LabelFor(model => model.Detail, "Detail", new { @class = "control-label col-md-4", style = "width:160px" }) 

Answer 9

我总是试图远离改变大小，让东西填满空间并使用网格系统。

这有助于它适用于所有屏幕尺寸。

谢谢

http://plnkr.co/edit/2ZczWMsNk9arscbY26j8?p=preview

<div class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-md-2">Wide</label>
    <div class="col-md-10">
      <input class="**form-control**"  type="TextBox"/>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-md-2">Not as Wide</label>
    <div class="col-md-8">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <label class="control-label col-md-2">Narrow</label>
    <div class="col-md-6">
      <input class="form-control"  type="TextBox"/>
    </div>
  </div>

  <div class="form-group">
    <div class="col-md-offset-2 col-md-10">
      <input type="submit" value="Create" class="btn btn-default" />
    </div>
  </div>
</div>

Answer 10

正如有人提到的那样，将大小放在文本框输入本身上。无需创建新类来处理宽度。

<div class="col-md-10">
...
   @Html.TextBoxFor(model => model.Name, new { @class = "form-control col-md-10" })
...
</div>