如何使用引导行和列增加文本区域的高度

Question

我设计了一个表单，其中连续有两个项目，如下所示：

我的输出

我使用的

代码：

<div class="row">
    <div class="col-sm-3">  <!-- [1, 0] -->
        <fieldset class="form-group">
            <label id="fieldTitle">Equipment Length</label>
            <select id="selectOption" class="form-control" required data-error="Please select Equipment Length"></select>
            <div class="help-block with-errors"></div>
        </fieldset>
    </div>
    <div class="col-sm-9">  <!-- [1, 1] -->
        <fieldset class="form-group">
            <label id="fieldTitle">Customer Notes</label>
            <textarea class="form-control" placeholder="Please write customer notes" ng-model="myTextarea" required data-error="Please enter customer notes"></textarea>
            <div class="help-block with-errors"> {{myTextarea}} </div>
        </fieldset>
    </div>
</div>

所以，请指导我如何增加文本区域的高度，就像我的

所需输出 请告诉我该怎么做。 谢谢

Answer 1

使用 Bootstrap 4，您需要拥有属性行并添加“height: 100%;”这样高度就会拉伸到指定的行数。 “行”沿不起作用。

<textarea rows="10" style="height:100%;"></textarea>

Answer 2

textarea {
  width: 300px;
  height: 150px;
}

根据需要进行调整。

Answer 3

在 HTML 集中

<textarea rows="10"></textarea>

在 CSS 集中

textarea { height: 100px; }

希望有帮助。

Answer 4

类 form-control 删除 textarea rows 属性，只需将其替换为 col-md-12

<textarea class="col-md-12" placeholder="Please write customer notes" ng-model="myTextarea" required data-error="Please enter customer notes"></textarea>

Answer 5

使用 Bootstrap 4，您需要添加 h-25 类

<textarea class="form-control h-25" rows="5" placeholder="Please write customer notes"></textarea>

Answer 6

不太喜欢全局更改 textarea css attr。

宁愿使用特定的 css 类，但它可能会被其他一些类覆盖，因此您可以使用

!important

，尽管这不是最佳实践。

{{ form_widget(form.myTextarea,{'attr': {'class': 'specific-textarea'}}) }}

并添加到你的CSS中

.specific-textarea { height: 200px !important; }

Answer 7

在 Bootstrap 5 中，只需添加属性

rows

和类

h-100

，如下所示：

<textarea class="form-control h-100" rows="6"></textarea>