如何阻止Submit按钮随textarea组件一同拉伸？

嘿，这个问题我之前做项目的时候也碰到过，其实只需要调整Flex布局的属性，再给按钮加上固定尺寸的约束就能搞定。直接看修改后的代码：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

<form action="" class="d-flex">
  <!-- 给textarea添加flex-grow-1让它占满剩余空间，mr-2增加间距 -->
  <textarea name="post_text" class="form-control flex-grow-1 mr-2"></textarea>
  <!-- flex-shrink-0防止按钮被压缩，固定宽度保持尺寸 -->
  <input type="submit" value="Submit" class="btn btn-primary flex-shrink-0" style="width: 100px;">
</form>

关键修改点解释： #

• flex-grow-1（给textarea）：这是Bootstrap内置的Flex类，作用是让textarea自动填充表单容器的剩余可用空间，这是它能自由拉伸的基础。
• flex-shrink-0（给按钮）：强制按钮不被Flex布局压缩，始终保持自身的尺寸，不会跟着textarea一起拉伸。
• 固定按钮宽度：我给按钮加了style="width: 100px;"来明确固定宽度，你也可以根据需求调整这个数值，或者用Bootstrap的宽度类（比如w-25）来代替，只要保证按钮有固定尺寸即可。
• 可选：限制textarea拉伸方向：如果只想让textarea垂直拉伸（不允许左右调整），可以给textarea加上样式resize: vertical;，代码如下：

  <textarea name="post_text" class="form-control flex-grow-1 mr-2" style="resize: vertical;"></textarea>
  

这样调整后，不管怎么拉伸textarea，按钮都会稳稳保持你设置的固定尺寸啦~

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