在引导模式中将文本区宽度设置为100%

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

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

如何使模态体 div 中的文本区域覆盖所有可用空间 = 宽度100% ？

143131 次浏览
小开

如果我没理解错的话，这就是你要找的。

.form-control { width: 100%; }

参见 JSFiddle 上的演示。

小开
最佳答案

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

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

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

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

虽然这个选择器看起来有些咄咄逼人，但它有助于将 textarea限制在模式本身的内容区域内。

另外，上面介绍的 min-width解决方案可以使用基本的引导模式，尽管我在使用棱角-ui-bootstrap 模式时遇到了一些问题。

小开

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

这会增加文本区域中的行数，类似于 style="min-height: 100%"100% 或80% 和 min-width: 50%的宽度等。同时 row=7改变了高度，cols=50改变了织物的宽度。

小开

我是新来的。NET/MVC 编程，但是我的理解是 Site.CSS 文件(在 MVC 的 Content 文件夹下)是 Bootstrap CSS 的站点级覆盖，允许你以一种可移植的和非破坏性的方式覆盖 Bootstrap 本机设置(例如，你可以很容易地保存和重新应用你的 Site.CSS 修改，当你的系统更新 Bootstrap)

在 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像素的宽度是在发布日期附近匆忙添加的，希望使用户界面看起来比100% 的宽度输入更好。幸运的是，它被放置在一个“可见”的位置在网站文件，所以你会注意到它。

只需改变宽度设置，或者为所有三个输入类型，或者拉出文本区，并给它自己的设置，如果你想留下其他单独。

小开

我也有同样的问题，我通过在文本区域的样式中添加这段代码解决了这个问题。

resize: vertical;

您可以检查引导程序引用 给你

小开

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

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

  2. 通过添加以下属性扩展此类:

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

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


提交答案