twitter-bootstrap bootstrap3 中文本输入字段的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18545309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Width of text input fields in bootstrap3
提问by EthanLWillis
Does bootstrap3 have native functionality for increasing the width of a text input field?
bootstrap3 是否具有增加文本输入字段宽度的本机功能？
I know in bootstrap2 I'd just append a class like input-lg to modify the width of the input, however in bootstrap3 this just seems to increase the height.
我知道在 bootstrap2 中我只是附加一个像 input-lg 这样的类来修改输入的宽度，但是在 bootstrap3 中这似乎只是增加了高度。
回答by Timothy Shields
Take a look at the "Column sizing" subsection here.
在此处查看“列大小调整”小节。
Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.
使用 .input-lg 之类的类设置高度，并使用 .col-lg-* 之类的网格列类设置宽度。
Example from Bootstrap 3 website:
来自 Bootstrap 3 网站的示例：
<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>
回答by Plippie
I found the BS3 construction very cumbersome bloated constructon. Best is to make you own css class for inputs, here is mine: jsFilde
我发现 BS3 结构非常繁琐臃肿。最好是让你自己的 css 类用于输入，这是我的：jsFilde
<div class="form-group">
<label class="col-sm-3 control-label">Inline inputs</label>
<div class="col-sm-9">
<div class="form-inline">
<input type="text" value="Item 1" required class="form-control w-2"/> <input type="text" value="Item 2" class="form-control w-2"/>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Stacked Inputs</label>
<div class="col-sm-9">
<input type="text" value="Item 1" required class="form-control w-2"/><input type="text" value="Item 2" class="form-control w-2"/>
</div>
</div>
CSS code:
CSS代码：
input[type="text"].w-2,
input[type="date"].w-2,
input[type="datetime"].w-2,
input[type="email"].w-2,
input[type="number"].w-2,
select.w-2{
width: 16.66666667%;
}
input[type="text"].w-3,
input[type="date"].w-3,
input[type="datetime"].w-3,
input[type="email"].w-3,
input[type="number"].w-3,
select.w-3{
width: 25%;
}
input[type="text"].w-4,
input[type="date"].w-4,
input[type="datetime"].w-4,
input[type="email"].w-4,
input[type="number"].w-4,
select.w-4{
width: 33.33333333%;
}
input[type="text"].w-5,
input[type="date"].w-5,
input[type="datetime"].w-5,
input[type="email"].w-5,
input[type="number"].w-5,
select.w-5{
width: 41.66666667%;
}
