twitter-bootstrap - bootstrap3中文本输入字段的宽度

Question

bootstrap3 是否具有增加文本输入字段宽度的本机功能？

我知道在 bootstrap2 中我只是附加一个像 input-lg 这样的类来修改输入的宽度，但是在 bootstrap3 中这似乎只是增加了高度。

Answer 1

看看这里的“列大小”小节。

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

来自 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>

Answer 2

我发现 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 代码：

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%;
}