如何在bootstrap 3中自定义输入字段宽度

Question

如何在bootstrap 3中自定义输入字段宽度

use*_*528 49 text input twitter-bootstrap-3

删除了关键功能,例如input-xlarge和input-large,它在bootstrap 3中的替代是什么？

当然我可以使用col-lg-12等但是在选项卡窗格中出现错误.

我也可以使用style = "width:30px;"然后它会失去它的响应性而不像input-xlarge.任何建议等？

Answer 1

Ale*_*ner 67

在Bootstrap 3中,.form-control(您给出输入的类)的宽度为100%,这允许您将它们包装到col-lg-X div中以进行排列.来自文档的示例:

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

Run Code Online (Sandbox Code Playgroud)

请参见列大小调整.

它与Bootstrap 2.3.2有点不同,但你很快就习惯了.

请注意,您可以使用Bootstrap的预定义网格类,通过向表单添加".form-horizontal",在水平布局中对齐表单控件的标签和组.这样做会改变`.form-groups`以表现为网格行,因此不需要`.row` - [更多信息](http://getbootstrap.com/css/#forms-horizontal). (2认同)

Answer 2

dev*_*evo 6

您可以使用这些类

输入LG

输入

和

输入-SM

对于输入字段,用btn替换输入按钮.

请查看此文档http://getbootstrap.com/getting-started/#migration

这将仅改变元素的高度,以减少使用网格系统类的宽度col-xs-* col-md-* col-lg-*.

例子col-md-3.请参阅此处的doc http://getbootstrap.com/css/#grid

这些类不会更改输入元素的宽度. (17认同)
@eddiegroves这将只改变元素的高度,以减少使用网格系统类的宽度,如``.col-xs-*.col-md-*.col-lg-*``.例如``col-md-3``.请参阅此处的doc http://getbootstrap.com/css/#grid (4认同)

归档时间：	12 年，2 月前
查看次数：	214064 次
最近记录：	8 年，2 月前