forms - Bootstrap 3 表单输入元素的大小属性不会改变相同的长度

Question

在 Bootstrap 3 中，表单输入元素的大小不会根据 size 属性的指定而改变，代码片段:

<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" size="50">

我知道有一些变通方法可以缩短输入元素的长度，但是，请帮助我理解为什么它不能与 input 元素的 size 属性一起使用？

工作代码在 bootply .

谢谢!

Answer 1

您可以做几件事。您可以使用 Bootstrap 的 col-*类来更改表单的布局方式，或者您可以修改 CSS 或向输入添加内联样式(例如 <input ... style="width:200px;"> )。

我个人会尝试使用 col-*类以保持一致性，即使它会为您的页面添加更多标记。例如，像这样:

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1" class="col-sm-4">Email address</label>
    <div class="col-sm-8">
      <input class="form-control" id="exampleInputEmail1" placeholder="Enter email" size="50" type="email">
    </div>
  </div>
...

我还会尝试遵循 the Bootstrap docs 中的文档和示例.