CSS 在 Bootstrap 3 中设置 Textarea 的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35925665/
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
Setting the width of a Textarea in Bootstrap 3
提问by Caverman
I've been searching for a way to make my 'textarea' go to 100% inside it's column. I've seen a few different ways (none of which I've been able to work) to make a 'textarea' expand to 100% in Bootstrap. I've everything from custom in line CSS styles to using class="form-control col-lg-12" to overwriting Bootstrap's CSS.
我一直在寻找一种方法，让我的“textarea”在它的列内达到 100%。我已经看到了几种不同的方法（我都无法使用）在 Bootstrap 中将“textarea”扩展到 100%。我拥有从自定义内嵌 CSS 样式到使用 class="form-control col-lg-12" 到覆盖 Bootstrap 的 CSS 的所有内容。
Anyone have a working suggestion that would allow for fluid re-sizing?
任何人都有允许流体重新调整大小的工作建议？
Here is the code that I have. Right now the width goes to a little past the placeholder text.
这是我拥有的代码。现在宽度略超过占位符文本。
<div class="row">
<div class="col-lg-7">
<h2>@Model.EmployeeName</h2>
<h3>Employee #: @Model.EmployeeNumber</h3>
<h5>(Optional): Exception Log comments related to this shift for your Supervisor/Time Keeper.</h5>
<textarea rows="2" placeholder="Exception Log comments."></textarea>
</div>
<div class="col-lg-5 text-right">
<div ng-controller='TimeCtrl'>
<h2>{{ clock | date:'fullDate'}}</h2>
<h1>{{ clock | date:'HH:mm:ss'}}</h1>
<input type="submit" class="btn btn-xxlarge btn-success" value="Punch In" />
</div>
</div>
</div>
回答by georaldc
I believe bootstrap's own form element class (form-control) is what will make form elements take up the full width of the column they are in.
我相信引导程序自己的表单元素类（表单控件）将使表单元素占据它们所在列的整个宽度。
<textarea class="form-control"></textarea>
回答by Shah Aadil
class="form-control"must work. If it is not working, it means that somewhere in css file, max-widthproperty is set for text-area which restricts the width. In this case check site.css file and remove max-width property.
class="form-control"必须工作。如果它不起作用，则意味着在 css 文件中的某处，max-width为限制宽度的 text-area 设置了属性。在这种情况下，检查 site.css 文件并删除 max-width 属性。
回答by oguzhancerit
Just add a 'form-control' class to textarea. If you are working on a small screen, col-lg-7 and col-lg-5 is cover all window.
只需向 textarea 添加一个“表单控件”类。如果您在小屏幕上工作，col-lg-7 和 col-lg-5 将覆盖所有窗口。
And your columns text alings are different. You may see the col-sm-12 in your screen.
并且您的列文本alings 是不同的。您可能会在屏幕上看到 col-sm-12。
<textarea class="form-control" rows="2" placeholder="Exception Log comments."></textarea>
回答by Peter Finn
If you just add some custom CSS you can force it to use the entire container width
如果您只是添加一些自定义 CSS，您可以强制它使用整个容器宽度
min-width: 100%
max-width: 100%
However, using the bootstrap class "form-control" also accomplishes this
但是，使用引导程序类“form-control”也可以实现这一点
回答by Bhuwan
Simply add form-controlclass to your textareaif you want 100% width on it, no need to add col-lg-12because form-controlclass gives the 100% width of the parent to the element.
如果您想要 100% 的宽度，只需将form-controlclass添加到您的元素中textarea，无需添加，col-lg-12因为form-controlclass 将父元素的 100% 宽度提供给元素。
<textarea class="form-control" rows="4" placeholder="Exception Log comments."></textarea>
