Bootstrap表单中textarea超出div范围，如何通过内联CSS解决？

嘿，这个问题我太熟悉了——Bootstrap里的textarea默认允许用户拖拽调整尺寸，一不小心就会撑破父容器的边界。下面给你几个实用的解决办法，包括你想要的内联CSS方案：

1. 最直接的内联CSS方案：禁止拖拽调整 #

如果不需要用户手动调整textarea的大小，直接在textarea标签里加内联样式，禁用拖拽功能：

<textarea class="form-control" style="resize: none; width: 100%;"></textarea>

• resize: none;：完全禁止用户拖拽调整textarea的宽高，从根源上避免超出问题
• width: 100%;：确保textarea始终占满父容器的宽度（其实Bootstrap的form-control类已经自带这个属性，但加上更保险）

2. 允许垂直调整，但限制宽度不超出 #

要是想保留用户垂直调整高度的功能，同时不让宽度超出父容器，可以这么写：

<textarea class="form-control" style="resize: vertical; max-width: 100%;"></textarea>

• resize: vertical;：只允许用户拖拽调整垂直高度，水平方向锁定
• max-width: 100%;：强制textarea的最大宽度等于父容器宽度，就算意外触发水平调整也不会超出

3. 进阶：限制最大高度（可选） #

如果担心用户把textarea拉得太高，还可以加上max-height属性，比如限制最大高度为300px：

<textarea class="form-control" style="resize: vertical; max-width: 100%; max-height: 300px;"></textarea>

结合你的代码示例修改 #

把你的表单里的textarea替换成上面的写法就行，比如完整的表单片段大概是这样：

<div id="content">
  <div class="container">
    <div class="col-md-12">
      <ul class="breadcrumb">
        <li><a href="index.php">Home</a></li>
        <li><a href="index.php">Contact Us</a></li>
      </ul>
      <!-- breadcrumb ends -->
      <form>
        <!-- 其他表单元素 -->
        <div class="form-group">
          <label for="message">Your Message</label>
          <textarea id="message" class="form-control" rows="5" style="resize: vertical; max-width: 100%;"></textarea>
        </div>
        <!-- 提交按钮等 -->
      </form>
    </div>
  </div>
</div>

原理很简单：textarea默认的resize: both属性允许用户随意调整宽高，而Bootstrap的栅格容器（比如col-md-12）宽度是固定的，所以拖拽宽度就会超出。通过内联样式修改resize属性并限制最大宽高，就能完美解决这个问题啦！

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