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

从.col-md-12移除.container课程。将.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右侧占用空间后导致该public function getreq() { $this->db->where('status','pending'); $query=$this->db->get('instanthire'); $result=$query->result(); $num_rows=$query->num_rows(); $last_three_record=array_slice($result,-3,3,true); return array("all_data"=>$result,"num_rows"=>$num_rows,"last_three"=>$last_three_record); }元素，并且您会看到奇怪的行为。

Bootstrap网格系统在模态中无法正常工作

1 个答案: