如何设置textarea使其铺满网页宽度？附Chrome开发者工具获取的源码

嘿，我来帮你搞定这个问题！看你页面里已经引入了Bootstrap，那咱们优先用现成的工具，也给你准备了自定义CSS的方案，按需选择就行：

方案1：用Bootstrap内置类（最推荐） #

Bootstrap的form-control类天生就是为表单元素准备的，它默认会让元素宽度占满父容器，还自动处理了盒模型、响应式和基础样式，完全符合你的需求。

直接给textarea加上这个类就行：

<textarea class="form-control" rows="5" placeholder="请输入内容..."></textarea>

为什么好用？因为form-control已经内置了width: 100%;和box-sizing: border-box;，不用担心padding或者border导致元素溢出父容器的问题，还能和其他Bootstrap表单元素样式统一。

方案2：自定义CSS（适合不需要Bootstrap样式的场景） #

如果你不想用Bootstrap的类，或者需要更个性化的样式，可以自己写CSS来实现：

方法A：内联样式（快速测试） #

直接在textarea标签里加样式：

<textarea style="width: 100%; box-sizing: border-box;" rows="5"></textarea>

重点是box-sizing: border-box;——它会把元素的padding和border都算在设置的宽度里面，避免默认情况下元素因为这些属性超出父容器的问题。

方法B：在site.css里定义类（可复用） #

打开你的site.css，添加一个自定义类：

.full-width-textarea {
  width: 100%;
  box-sizing: border-box;
  /* 这里可以加你自己的样式，比如padding: 10px; border: 1px solid #ddd; */
}

然后在textarea上使用这个类：

<textarea class="full-width-textarea" rows="5"></textarea>

小提醒 #

• 确保textarea的父元素没有设置固定宽度或者overflow: hidden这类会限制宽度的属性，不然textarea最多只能铺满父元素的宽度（不过这其实也是正常的布局逻辑啦）。
• 如果用Bootstrap的话，把textarea放在.container或者网格列（比如.col-md-12）里面，响应式效果会更顺滑。

内容的提问来源于stack exchange，提问作者Eminem