在引导模式下将textarea的宽度设置为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> 

如何使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%; } 

在JSFiddle上查看演示 。

Answer 3

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

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

虽然这个select器看起来有侵略性 它有助于限制textarea进入模式本身的内容区域。

此外，上面提出的min-width解决scheme，与基本自举模式一起工作，但是在使用angular-ui-bootstrap模式时遇到了问题。

Answer 4

你也可以简单地添加属性row =“行数”就好

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

这将增加textarea中与style="min-width: 100%" 100％或80％等非常相似的行数。