Question

使用Bootstrap 3，表单输入元素大小不会像size属性所指定的那样更改，代码段：

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

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

bootply处的工作代码。

谢谢！

Answer 1

如果您使用bootstrap 3尝试将输入放在div

中

<div class="col-md-6">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" />
</div>

Answer 2

你可以做几件事。您可以使用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中的文档和示例进行操作。

Answer 3

如果您正在使用Visual Studio，那么您可能希望删除 Site.css中的Microsoft默认值，其中包含：

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

Bootstrap 3表单输入元素的size属性不会改变相同的长度

3 个答案: