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

Posted 2023-05-07

【中文标题】如何使用引导行和列增加文本区域的高度

【英文标题】：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 属性，但它不起作用。

【参考方案1】：

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

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

【讨论】：

与@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;