尝试了所有可能的方法,但从未成功:
<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>
如何使modal-body div中的textarea覆盖所有可用空间=宽度100%?
答案 0 :(得分:113)
尝试将min-width: 100%
添加到textarea的样式中:
<textarea class="form-control" style="min-width: 100%"></textarea>
答案 1 :(得分:9)
答案 2 :(得分: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的宽度。
答案 3 :(得分:2)
提供的解决方案可以解决问题。但是,它们也会影响具有相同样式的所有其他textarea
元素。我不得不解决这个问题,只是创建了一个更具体的选择器。以下是我提出的防止侵入性变化的方法。
.modal-content textarea.form-control {
max-width: 100%;
}
虽然这个选择器可能看起来很激进。它有助于将textarea
限制在模态本身的内容区域中。
此外,上面提到的min-width
解决方案适用于基本的引导模态,但是在使用angular-ui-bootstrap模态时遇到了问题。
答案 4 :(得分:1)
答案 5 :(得分:0)
在这里测试了这些建议之后,我得出结论,我们必须应用两件事。
将form-control
类应用于您的textarea
元素。这是Bootstrap的内置类之一。
通过添加以下属性来扩展此类:
.form-control {
max-width: 100%;
}
希望这对正在寻找此问题的解决方案的人有所帮助。
答案 6 :(得分:-1)
我是.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并将其设置为自己的设置。