bootstrap3中文本输入字段的宽度

Question

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

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

Answer 1

请查看“列大小调整”小节here。

  

使用像.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%;
}