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

【问题标题】：How to increase height of textarea using bootstrap rows and columns如何使用引导行和列增加文本区域的高度
【发布时间】：2018-07-11 11:52:58
【问题描述】：

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

我的输出

我使用的

代码：

<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>

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

想要的输出 请告诉我该怎么做。谢谢

【问题讨论】：

你试过<textarea>rows属性吗？
使用textarea的rows - https://www.w3schools.com/tags/att_textarea_rows.asp属性
bootstrap的V3或V4
@E-housmaMardini 是的，我尝试了 rows 属性，但它不起作用。

标签： html css twitter-bootstrap

【解决方案1】：

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

&lt;textarea rows="10" style="height:100%;"&gt;&lt;/textarea&gt;

【讨论】：

与@Noriel 的答案相同，但 8 个月后
也许，虽然我发现 100px 与 100% 的结果完全不同。不过，我会把这个留给新手......
h-100 在 Bootstrap 上，仅供参考

【解决方案2】：

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

根据需要进行调整。

【讨论】：

@core114 你是在暗示我抄袭了吗？你确定我使用相同的值不是完全巧合吗？
@core114 在这种情况下，只要一小段代码，它就不太可能被实际抄袭。相比之下，当大部分代码（比如 15 行以上）完全相同时，很可能是抄袭。但始终首先要以诚信为前提。

【解决方案3】：

在 HTML 集合中

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

在 CSS 集合中

textarea { height: 100px; }

希望对你有帮助。

【讨论】：

【解决方案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>

【讨论】：

【解决方案5】：

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

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

【讨论】：

也许您可以解释一下该类的作用以及为什么添加它会有所帮助
h-25 表示父元素高度的 25%

【解决方案6】：

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

宁愿使用特定的 css 类，但它可能会被其他一些类覆盖，因此您可以使用 !important，即使这不是最佳做法。

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

并添加你的 CSS

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

【讨论】：