HTML嵌套div在父div之外

Question

我遇到的问题是我的div出现在父div之外。这仅在窗口在全屏模式下的计算机上时发生，但是当屏幕尺寸变小到手机/平板电脑尺寸时，div将按其应有的方式运行。在这个编码器中，我使用边框颜色来帮助区分div在父div之外的时间以及它们在父div中的时间。 http://codepen.io/MarkBond/pen/LVKPjG?editors=110

全屏

电话视图

HTML

            <div class="ibox-content" id="ibox-9">
                <!--DIV BODY-->
                <div class="content active" id="budgetSelection">
                    <div class="col-lg-6">
                        <label>Budget Scenerio</label>
                        <div class="checkbox">
                            <label><input type="checkbox" />50mill</label>
                        </div>
                        <div class="checkbox">
                            <label><input type="checkbox" />100mill</label>
                        </div>
                        <label>Table Views</label>
                        <div class="checkbox">
                            <label><input type="checkbox" />Table1</label>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="radio">
                            <label><input type="radio" />Show Treatments</label>
                        </div>
                        <div class="radio">
                            <label><input type="radio" />Show Years</label>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

你可以给你的div团体一个container-fluid课程。

Bootply Link

<div class="content active container-fluid" id="budgetSelection">

你也可以去clearfix解决问题。

Answer 2

您的div在全屏视图中浮动，因此父容器需要应用某种clearfix。您应该只需添加＆＃34; clearfix＆＃34;如果你正在使用bootstrap，那就上课。

<div class="content active clearfix" id="budgetSelection" ng-controller="InfoController as infoCtrl">

Answer 3

将宽度100％赋予类col-lg-6。目前@media的最小宽度为50％（最小宽度：1200px）。

.col-lg-6 {
    width: 100%;
}