Question

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

    <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％？

Answer 1

尝试将min-width: 100%添加到textarea的样式中：

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

Answer 2

如果我明白这就是你要找的东西。

.form-control { width: 100%; }

请参阅demo on JSFiddle。

Answer 3

您也可以只添加属性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>

这会增加textarea中与style="min-height: 100%" 100％或80％非常相似的行数以及宽度等min-width: 50%。row=7更改高度和{{ 1}}更改textarea的宽度。

Answer 4

提供的解决方案可以解决问题。但是，它们也会影响具有相同样式的所有其他textarea元素。我不得不解决这个问题，只是创建了一个更具体的选择器。以下是我提出的防止侵入性变化的方法。

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

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

此外，上面提到的min-width解决方案适用于基本的引导模态，但是在使用angular-ui-bootstrap模态时遇到了问题。

Answer 5

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

resize: vertical;

您可以检查Bootstrap参考here

Answer 6

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

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

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

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

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

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

只需为所有三种输入类型更改宽度设置，或者如果您想让其他输入类型保持不变，请拉出textarea并将其设置为自己的设置。

在bootstrap模式中将textarea宽度设置为100％

7 个答案: