Question

我正在实现模态，并且它扩展到整页宽度，而不像bootstrap网站上演示的那样。

<div class="modal fade" id="contact" role="dialog">
            <div class="modal-disalog">
                <div class="modal-content">
                    <div class="modal-header">
                        <p>Contact Us</p>
                    </div>
                    <div class="modal-body">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                    </div>
                    <div class="modal-footer">
                        <a class="btn btn-info" data-dismiss="modal">Ok</a>
                    </div>
                </div>
            </div>
        </div>

Answer 1

只有一个错字：

<div class="modal-disalog">

应该是

<div class="modal-dialog">

并且应该适用正确的css规则。

Answer 2

第2行中的class =“modal-dialog”而不是class =“modal-dialog”

这应该有用。

<div class="modal fade" 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">&times;</button>
                    <h4 class="modal-title" id="myModalLabel" style="color: gray;">Title</h4>
                </div>
                <div class="modal-body" style="color: black;">
                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>

bootstrap模态拉伸到整页宽度？

2 个答案: