Html 在引导模式中将 textarea 宽度设置为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24584779/
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
Set textarea width to 100% in bootstrap modal
提问by Bartosz
Was trying all possible ways, but never succeeded:
尝试了所有可能的方法，但从未成功：
<div style="float: right">
<button type="button" value="Decline" class="btn btn-danger" data-toggle="modal" data-target="#declineModal">Decline</button>
</div>
<!-- Modal -->
<div class="modal fade" id="declineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Comment</h4>
</div>
<div class="modal-body">
<textarea class="form-control col-xs-12"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger">Decline</button>
</div>
</div>
</div>
</div>
How to make the textarea in modal-body div to cover all available space = width 100%?
如何使 modal-body div 中的 textarea 覆盖所有可用空间 = 宽度 100%？
回答by 1_bug
Try add min-width: 100%to style of your textarea:
尝试添加min-width: 100%到 textarea 的样式：
<textarea class="form-control" style="min-width: 100%"></textarea>
回答by Izzy
If i understand right this is what your looking for.
如果我理解正确，这就是你要找的。
.form-control { width: 100%; }
See demo on JSFiddle.
请参阅JSFiddle 上的演示。
回答by NomanJaved
You can also just simply add the attribute row="number of rows"and cols="number of columns"like
您也可以只是简单的添加属性row="number of rows"和cols="number of columns"像
<div class="modal-body">
<textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>
This will increase the number of rows in the textarea that is much similar to style="min-height: 100%"100% or 80% and min-width: 50%for width etc. Also row=7changes the height and cols=50changes the width of textarea.
这将增加 textarea 中的行数，与style="min-height: 100%"100% 或 80% 以及min-width: 50%宽度等非常相似。还会row=7更改cols=50textarea的高度和宽度。
回答by Itanex
The provided solutions do resolve the issue. However, they also impact all other textareaelements with the same styling. I had to solve this and just created a more specific selector. Here is what I came up with to prevent invasive changes.
提供的解决方案确实解决了该问题。但是，它们也会影响textarea具有相同样式的所有其他元素。我不得不解决这个问题，只是创建了一个更具体的选择器。这是我想出的防止侵入性变化的方法。
.modal-content textarea.form-control {
max-width: 100%;
}
While this selector may seem aggressive. It helps restrain the textareainto the content area of the modal itself.
虽然这个选择器可能看起来很激进。它有助于限制textarea进入模态本身的内容区域。
Additionally, the min-widthsolution presented, above, works with basic bootstrap modals, though I had issues when using it with angular-ui-bootstrap modals.
此外，min-width上面提出的解决方案适用于基本的引导模式，尽管我在将它与 angular-ui-bootstrap 模式一起使用时遇到了问题。
回答by Günay Gültekin
回答by Tung
After testing those suggestions here, I draw the conclusion that we have to apply two things.
在测试了这些建议之后，我得出结论，我们必须应用两件事。
Apply
form-controlclass to yourtextareaelement. This is among Bootstrap's built-in classes.Extend this class by adding the following property:
将
form-control类应用于您的textarea元素。这是 Bootstrap 的内置类之一。通过添加以下属性扩展此类：
.form-control {
max-width: 100%;
}
Hope this helps others who are looking for a solution to this issue.
希望这可以帮助其他正在寻找解决此问题的方法的人。
回答by John Kowtko
I am new to .NET/MVC programming, but my understanding is that the Site.css file (under the Content folder in MVC) is a site-level override for Bootstrap CSS, allowing you to override bootstrap native settings in a portable and non-destructive manner (e.g. you can easily save and reapply your site.css changes when updating Bootstrap on your system.)
我是 .NET/MVC 编程的新手，但我的理解是 Site.css 文件（在 MVC 中的 Content 文件夹下）是 Bootstrap CSS 的站点级覆盖，允许您以可移植和非可移植的方式覆盖引导本机设置- 破坏性方式（例如，在系统上更新 Bootstrap 时，您可以轻松保存并重新应用您的 site.css 更改。）
In Bootstrap 3.0.0, Site.css has the following style setting:
在 Bootstrap 3.0.0 中，Site.css 具有以下样式设置：
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
Other blogs have suggested that this 280px width was added in haste near a release date, in a desire to make the UI look better than it does with 100% width input. Fortunately it was placed in a "visible" location in the site file so you would notice it.
其他博客建议在发布日期附近匆忙添加这个 280px 宽度，希望使 UI 看起来比使用 100% 宽度输入时更好。幸运的是，它被放置在站点文件中的“可见”位置，因此您会注意到它。
Simply change the width setting, either for all three input types, or pull out textarea and give it its own setting if you want to leave the others alone.
只需更改所有三种输入类型的宽度设置，或者拉出 textarea 并为其设置自己的设置，如果您想不理会其他输入类型。
