如何设置文本区域的默认大小，但仍允许其根据用户的设备进行调整？

Question

我正在尝试制作一个 5 行的文本区域，宽度默认为其下方容器的宽度，但如果用户使用小型移动设备（例如智能手机），也允许它变得更窄。我一直在研究，发现对于是否使用 CSS 还是 HTML 来改变文本区域的大小存在争议。我对网络开发相当陌生（从上周开始），所以如果您知道如何解决我的问题，您能告诉我为什么您选择了这种方法吗？

<form class="form-inline">

    <div class="form-group">

        <textarea class="form-control" rows="5"></textarea>

    </div>
</form>


<form class="form-inline">

  <div class="form-group">

    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>

    <div class="input-group">

      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">

    </div>

  </div>

  <button type="submit" class="btn btn-primary">Send!</button>

</form>

Answer 1

使用form-inline使form-group显示inline-block..如果您希望表单组拉伸整个宽度，您可以使用form-horzontal

或者您可以只设置显示form-group样式block

<form class="form-inline">
    <div class="form-group" style="display:block">
        <textarea class="form-control" rows="5"></textarea>
    </div>
</form>

确保 site.css 没有文本区域的最大宽度值。我相信这是默认样式表中的

input,
select,
textarea {
    max-width: 280px;
}