Bootstrap Grid System无法按预期方式工作

Question

我有一个用于显示内容的简单模式。如下所示：

<div id="tacModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">title</h4>
            </div>
            <div class="modal-body">
                <div class="container col-md-12" >
                    <div class="row">
                        <div class="col-md-2">
                            <img src="path/to/image" >
                        </div>
                        <div class="col-lg-10">
                            &nbsp;
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            &nbsp;
                        </div>
                    </div>
                    </div>
                </div>



            <div class="modal-footer">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
        </div>    
    </div>
    </div>

我面临的问题是，当屏幕尺寸达到某个阈值时，内容将放置在页脚中。

在移动甚至平板电脑大小的屏幕上，所有内容均正确放置在模体中。 但是，在我的桌面屏幕上，内容位于页脚内。

为什么会这样，我该如何解决？

Answer 1

从.container删除.col-md-12类。 将.container与Bootstrap的网格类（ .col-*-* ）混合使用是个坏主意。

为什么会造成问题？

如果您查看Bootstrap的CSS，则会发现：

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 992px) {
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        float: left;
    }
}

.container的样式设置为保留在页面中心。 但是在992px及以上的屏幕上，您的.container向左浮动并产生布局问题。 该float在你的后引起元素.container采取的右侧空间.container如果可能的话，你会看到奇怪的行为。