在bootstrap模式中将textarea宽度设置为100%

时间:2014-07-05 09:06:35

标签: html5 css3 twitter-bootstrap textarea bootstrap-modal

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

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

7 个答案:

答案 0 :(得分:113)

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

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

答案 1 :(得分:9)

如果我明白这就是你要找的东西。

.form-control { width: 100%; }

请参阅demo on JSFiddle

答案 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)

我有同样的问题。我通过在文本区域的样式中添加这段代码来修复它。

resize: vertical;

您可以检查Bootstrap参考here

答案 5 :(得分:0)

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

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

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

.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并将其设置为自己的设置。