[英]Bootstrap modal horizontal text overflowing
With a large text input inside <p>
tags the text overflows the bounds of the modal and off the screen requiring a horizontal scrollbar to read.使用<p>
标签内的大文本输入,文本会溢出模态的边界并离开屏幕,需要水平滚动条才能阅读。
I've copied the example code from the Bootstrap documentation and simply added a long text string inside the modal-body
section.我已经从 Bootstrap 文档中复制了示例代码,并在modal-body
部分中简单地添加了一个长文本字符串。 The example on the Bootstrap documentation website seems to word wrap the text correctly but my code does not. Bootstrap 文档网站上的示例似乎正确地对文本进行了自动换行,但我的代码却没有。
Here is my markup:这是我的标记:
<div class="modal fade in" id="myModal" 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" aria-hidden="true">×</button>
<h4 id="myModalLabel" class="modal-title">Modal Test</h4>
</div>
<div class="modal-body">
<p>Details below:</p>
<p>TEST: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
</div>
</div>
</div>
</div>
You can also see exactly what I mean by horizontal overflow on the jsFiddle I created here: http://jsfiddle.net/pX39W/11/您还可以确切地看到我在这里创建的 jsFiddle 上的水平溢出是什么意思: http : //jsfiddle.net/pX39W/11/
I'm sure it's something simple and I've just been staring at it too long to notice!我相信这很简单,我只是盯着它看了太久而没有注意到! Any help would be much appreciated.任何帮助将非常感激。
This worked for me and works WRT
screen sizes.这对我WRT
并且适用于WRT
屏幕尺寸。
CSS: CSS:
@media (min-width: 992px) {
.modalSize{
min-width: 800px !important;
background: white;
}
}
HTML: HTML:
<div class="modal-content modalSize">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.