在bootstrap模式中设置文本框宽度为100%。

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% 到你的Texttarea的风格。

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

Answer 2

如果我理解正确的话，这就是你要找的东西。

.form-control { width: 100%; }

请看 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 改变高度和 cols=50 改变textarea的宽度。

Answer 4

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

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

虽然这个选择器可能看起来很激进。但它有助于抑制 textarea 到模式本身的内容区域。

此外， min-width 上文介绍的解决方案，在基本的bootstrap模式下也能使用，不过我在使用angular-ui-bootstrap模式时遇到了问题。

Answer 5

我也遇到了同样的问题。我通过在文本区域的样式里面添加这段代码来解决。

resize: vertical;

你可以查看Bootstrap的参考资料 此处

Answer 6

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

1. 应用 form-control 类到你的 textarea 元素。这是Bootstrap的内置类之一。

2. 通过添加以下属性来扩展这个类。

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

希望这能帮助其他正在寻找解决这个问题的人。

Answer 7

我是.NETMVC编程新手，但我的理解是Site.css文件（在MVC中的Content文件夹下）是Bootstrap CSS的站点级覆盖，允许你以可移植和非破坏性的方式覆盖bootstrap原生设置（例如，当你在系统上更新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，给它自己的设置，如果你想放过其他类型。