无法调整输入字段大小答案

【问题标题】：Cannot adjust input field size无法调整输入字段大小
【发布时间】：2016-01-21 15:27:42
【问题描述】：

我已经分别尝试过 size 属性和 width 属性。但这行不通。我想要不同大小的输入和文本区域。这是我的 sn-ps。

CSS：

input, textarea{
    margin-left: 12px;
    font-family: segoe ui;
    width: 200;
}

HTML：

<input name="mail" type="email" class="form-control" id="usrMail" size="20"/>
<textarea name="comment" class="form-control" rows="5" id="comment"></textarea>

【问题讨论】：

你在使用引导程序吗？当心你有一个错误..它应该是width: 200px
“我想要不同大小的输入和文本区域” - 然后不要将它们都设置为 200px
@Sexy Turnip：这是我的尝试之一。正确阅读初始内容。
@Luis P. A：是的，我用过 bootstrap。而在其他形式中，使用 size 属性似乎没有问题。
你需要展示你已经尝试过的东西 - 不要发布显然会达到你想要的结果的相反的代码。

标签： html css twitter-bootstrap html-input

【解决方案1】：

如果您使用的是bootstrap，请查看bootstrap forms sizing。

表单中的输入大小：

使用.input-lg 和.input-sm 等类设置输入元素的高度。

使用.col-lg-* 和.col-sm-* 等网格列类设置元素的宽度。

【讨论】：

【解决方案2】：

使您的 CSS 正确。使用 'px'(200px) 作为宽度而不是使用 200。

input, textarea{
	margin-left: 12px;
	font-family: segoe ui;
	width: 200px;
	/* Put your other CSS here */
}

<input name="mail" type="email" class="form-control" id="usrMail" size="20"/>
<br /><br />
<textarea name="comment" class="form-control" rows="5" id="comment"></textarea>

【讨论】：

【解决方案3】：

input, textarea {
  margin-left: 12px;
  font-family: 'segoe ui'; 
}

input {
  width: 200px;
}

textarea {
  width: 300px;
}

<input name="mail" type="email" class="form-control" id="usrMail" size="20"/>
<br />
<br />
<textarea name="comment" class="form-control" rows="5" id="comment"></textarea>

【讨论】：

点击'Run code sn-p'，你会看到输入字段的大小不同。