在引导模式中将 textarea 宽度设置为 100%答案

【问题标题】：Set textarea width to 100% in bootstrap modal在引导模式中将 textarea 宽度设置为 100%
【发布时间】：2014-08-26 09:53:01
【问题描述】：

正在尝试所有可能的方法，但从未成功：

    <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">&times;</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>

如何使modal-body div中的textarea覆盖所有可用空间=宽度100%？

【问题讨论】：

当我删除 input-group 时，我的 textarea 位于 class="input-group" 的 div 中（因为我并不真正需要它） class="form-control" 的 textarea 扩展为自动填充可用宽度
给它一个高列值，比如 500。它将显示为一个完整的视图

标签： html css twitter-bootstrap textarea bootstrap-modal

【解决方案1】：

尝试将min-width: 100% 添加到文本区域的样式中：

<textarea class="form-control" style="min-width: 100%"></textarea>

【讨论】：

有没有原生支持让它全宽

【解决方案2】：

如果我理解正确，这就是您要找的。

.form-control { width: 100%; }

见demo on JSFiddle。

【讨论】：

【解决方案3】：

提供的解决方案确实可以解决问题。但是，它们也会影响具有相同样式的所有其他 textarea 元素。我必须解决这个问题，然后创建一个更具体的选择器。这是我想出的防止侵入性更改的方法。

.modal-content textarea.form-control {
    max-width: 100%;
}

虽然这个选择器可能看起来很激进。它有助于将textarea 限制在模态本身的内容区域中。

此外，上面介绍的min-width 解决方案适用于基本的引导模式，尽管我在将它与 angular-ui-bootstrap 模式一起使用时遇到了问题。

【讨论】：

一些笔记。不错的答案。但是，可能需要进行一些更正。您提到提供的解决方案会影响所有其他 textarea 元素。尽管其他解决方案确实如此，但接受的响应似乎并不如此。其次，我认为您的意思是使用“最小宽度”而不是“最大宽度”。

【解决方案4】：

你也可以简单地添加属性row="number of rows"和cols="number of columns"like

<div class="modal-body">
    <textarea class="form-control col-xs-12" rows="7" cols="50"></textarea>
</div>

这将增加 textarea 中的行数，这与 style="min-height: 100%" 100% 或 80% 和 min-width: 50% 的宽度等非常相似。此外，row=7 更改了高度，cols=50 更改了 textarea 的宽度.

【讨论】：

cols 改变宽度，而 rows 改变高度。

【解决方案5】：

我遇到了同样的问题。我通过在文本区域的样式中添加这段代码来修复它。

resize: vertical;

您可以查看引导参考here

【讨论】：

【解决方案6】：

在这里测试了这些建议后，我得出结论，我们必须应用两件事。

将form-control 类应用于您的textarea 元素。这是 Bootstrap 的内置类之一。
通过添加以下属性来扩展此类：

.form-control {
   max-width: 100%;
}

希望这对正在寻找此问题的解决方案的其他人有所帮助。

【讨论】：

【解决方案7】：

我是 .NET/MVC 编程的新手，但我的理解是 Site.css 文件（在 MVC 中的 Content 文件夹下）是 Bootstrap CSS 的站点级覆盖，允许您在一个可移植且非破坏性的方式（例如，在系统上更新 Bootstrap 时，您可以轻松保存并重新应用您的 site.css 更改。）

在 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;
}

其他博客建议在发布日期附近匆忙添加这个 280 像素宽度，以使 UI 看起来比 100% 宽度输入时更好。幸运的是，它被放置在站点文件中的“可见”位置，因此您会注意到它。

只需更改所有三种输入类型的宽度设置，或者拉出 textarea 并给它自己的设置，如果你想不理会其他人。

【讨论】：