不同大小的输入有各种类

 :class=>"input-mini"

 :class=>"input-small"

 :class=>"input-medium"

 :class=>"input-large"

 :class=>"input-xlarge"

 :class=>"input-xxlarge"

Answer 2

使用内置类 input-large ， input-medium ，...：<input type="text" class="input-large search-query">

的引导程序

或者使用你自己的css：

为元素添加唯一的类名class="search-query input-mysize"
在你的css文件中添加它（不是bootstrap.less或css文件）：
.input-mysize { width: 150px }

Answer 3

在bootstrap 3.0中：

使用.input-lg等类设置高度，并使用.col-lg - *等网格列类设置宽度。

示例：

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2">
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3">
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4">
    </div>
</div>

来源：http://getbootstrap.com/css/#forms-control-sizes

Answer 4

我使用span4或span6作为类来创建更宽的输入字段。

<input type="text" class="span6 input-large search-query">

这样您就不需要前面提到的其他自定义css了。

Answer 5

还有一个较小的称为“输入迷你”。

Answer 6

我将假设你遇到了同样的问题。即使您为TextBox指定了更大的尺寸并将其标记为重要，但框也不会变大。这可能是因为在你的site.css文件中，MaxWidth被设置为280px。

在输入中添加样式属性以删除MaxWidth，如下所示：

<input type="text"  style="max-width:none !important" class="input-medium">

Answer 7

在bootstrap 4中，他们设计了更大的输入文件。

增加输入文件大小的简单方法是使用font-size

添加样式，例如：输入[type =“ file”] { 字体大小：35px }

或者您可以创建一个自定义类并添加到输入控件中

Bootstrap：更宽的输入字段

7 个答案:

不同大小的输入有各种类