在bootstrap模式中将textarea宽度设置为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%textarea的样式:

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

这将增加文本区域中的行数，类似于style="min-height: 100%"100% 或 80% 以及min-width: 50%宽度等。还会更改文本区域的row=7高度和cols=50宽度。

Answer 4

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

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

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

此外，min-width上面提出的解决方案适用于基本的引导模式，尽管我在将其与 angular-ui-bootstrap 模式一起使用时遇到了问题。