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

所有答案都有帮助。

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

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

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

感谢

Answer 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.这不需要额外的类，并且额外的好处是，如果你有更长的验证消息，它将包装在与文本框相同的空间内。

Answer 3

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

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

然后在CSS中设置样式：

.long-textbox{
    width:300px;
}

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

Answer 4

通常您的代码设置了最大宽度字段。如果您将其更改为

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

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

Answer 5

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

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

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

使用这样的CSS：

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

Answer 6

使用HTML INPUT“Size”属性。

示例：

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

Answer 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" })

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

Answer 9

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

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

Answer 10

最佳解决方案

在MVC C＃项目中，

转到：内容文件夹> site.css

然后以CSS样式将 最大宽度 更改为 输入选择文本区域

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

**它将起作用**

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

10 个答案: