Bootstrap:更宽的输入字段

Question

如何使输入字段比Twitter的Bootstrap中的默认值更宽？

我试图hero-unit从示例中创建一个更宽的搜索表单.

Answer 1

不同大小的输入有各种类别

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

1. 为元素提供唯一的类名 class="search-query input-mysize"
2. 在你的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了.