Html 如何使用引导行和列增加 textarea 的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48557955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increase height of textarea using bootstrap rows and columns
提问by Sikandar Sahab
I have designed a form in which I have two items in a row, like this:
我设计了一个表单，其中连续有两个项目，如下所示：
My output
我的输出
Codethat I used:
我使用的代码：
<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>
So, please guide me how do I increase the height of the textarea just like my
所以，请指导我如何像我的一样增加 textarea 的高度
desired output
please tell me how do I do it.
Thanks
所需的输出请告诉我该怎么做。谢谢
回答by Noriel
In HTML set
在 HTML 集中
<textarea rows="10"></textarea>
In CSS set
在 CSS 集中
textarea { height: 100px; }
I hope it helps.
我希望它有帮助。
回答by reiallenramos
textarea {
width: 300px;
height: 150px;
}
adjust as needed.
根据需要进行调整。
回答by user3399299
With Bootstrap 4 you will need to have the property rows and add "height: 100%;" so that the height would stretch to the number of rows specified. "rows" along does not work.
使用 Bootstrap 4，您需要拥有属性行并添加“高度：100%；” 这样高度就会延伸到指定的行数。“行”沿不起作用。
<textarea rows="10" style="height:100%;"></textarea>回答by Hisham
the class form-controlremove textarea rows attribute so just replace it with col-md-12
类表单控件删除 textarea 行属性，因此只需将其替换为col-md-12
<textarea class="col-md-12" placeholder="Please write customer notes" ng-model="myTextarea" required data-error="Please enter customer notes"></textarea>
回答by Dantis Mathew
With Bootstrap 4 you will need to add h-25 class
使用 Bootstrap 4，您需要添加 h-25 类
<textarea class="form-control h-25" rows="5" placeholder="Please write customer notes"></textarea>
回答by Jean-Christophe Meillaud
Not a big fan of changing globally the textarea css attr.
不太喜欢全局更改 textarea css attr。
Would rather use a specific css class, but it could be overriden by some other classes, so you could use the !important, even tho it is not a best practice.
宁愿使用特定的 css 类，但它可能会被其他一些类覆盖，因此您可以使用!important，即使这不是最佳实践。
{{ form_widget(form.myTextarea,{'attr': {'class': 'specific-textarea'}}) }}
And add in your CSS
并添加您的 CSS
.specific-textarea { height: 200px !important; }
