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

Posted 2023-03-05

【中文标题】增加文本框大小引导程序（ASP.NET MVC）

【英文标题】：increase text box size bootstrap (ASP.NET MVC)

【发布时间】：2014-08-31 20:35:32

【问题描述】：

有没有办法增加横向文本框的大小（长度）？

<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-* 类，但没有成功。

【问题讨论】：

试着把它放在它自己的文本框上

删除你的cookies cltrl+F5 然后检查..

【参考方案1】：

所有答案都有帮助。

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

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

然后更改 col-md-* 类效果很好。

谢谢

【讨论】：

我将其修改为：max-width: unset;

【参考方案2】：

执行此操作的另一种方法是将包含文本框和验证消息的 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 列。这不需要额外的类，并且额外的好处是，如果您有更长的验证消息，它将与您的文本框在同一空间内换行。

【参考方案3】：

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

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

然后在你的 CSS 中设置样式：

.long-textbox
    width:300px;

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

【讨论】：

希望我现在给我的班级打电话long-textbox，那我们就差不多了哈哈！

【参考方案4】：

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

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

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

【参考方案5】：

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

您也可以手动应用自己的样式：

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

使用这样的 CSS：

input.wide-control 
    width: 300px;

【参考方案6】：

使用 HTML INPUT“大小”属性。

例子：

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

【讨论】：

HTML size 属性已弃用。

请问我在哪里可以找到这些信息？您确定不推荐使用 INPUT 大小吗？

你是正确的输入大小仍然有效。如今，许多前端设计人员/开发人员在 CSS 中使用 width 来实现 input 以在所有浏览器中的所有控件中保持一致。无论如何，我收回它。

【参考方案7】：

您可以使用文本框并将 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" ) 

【参考方案8】：

我总是尽量避免改变大小，我让东西填满空间并使用网格系统。

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

谢谢

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>

【参考方案9】：

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

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

【参考方案10】：

最佳解决方案

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

并将 max-width 更改为 input select textarea

的 css 样式

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

**它会工作的**