Bootstrap：更宽的input字段

我怎么能使input字段比Twitter的Bootstrap中的默认值更宽？

我正在尝试在示例中的hero-unit类中创build更广泛的search表单。

Answer 1

使用内置的input大 input ， input中 ，…： <input type="text" class="input-large search-query">引导

或者使用你自己的CSS：

1. 给元素一个唯一的classname class="search-query input-mysize"
2. 将其添加到您的css文件（而不是bootstrap.less或css文件）：
   .input-mysize { width: 150px }

Answer 2

有不同大小的input类

  :class=>"input-mini" :class=>"input-small" :class=>"input-medium" :class=>"input-large" :class=>"input-xlarge" :class=>"input-xxlarge" 

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作为类来创build更宽的input字段。

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

这样，你不需要额外的自定义CSS，前面提到。

Answer 5

还有一个叫做“input – 迷你”的小型产品。

Answer 6

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

添加一个样式属性到你的input，像这样删除MaxWidth：

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