动态添加时，模态弹出内容会溢出答案

【问题标题】：Modal popup content get overflow when added dynamically动态添加时，模态弹出内容会溢出
【发布时间】：2016-11-22 19:21:21
【问题描述】：

我在 div 点击时动态附加 HTML。我正在正确获取内容。但是当我附加 HTML 时，用户界面变得一团糟。

代码笔：http://codepen.io/anon/pen/QGpRRy

代码：

<html>
    <head>
        <title></title>
        <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"></link>
        <style>
            #pageTitle {
                display:none;
            }
        </style>
    </head>
<body>
    <div class="col-lg-12 text-center">
        <h1>Policies</h1>
    </div>
    <div class="col-lg-12">
        <div class="container" id="tiles">
            <div class="col-lg-4" style="min-height:80px; background-color:ActiveCaption" id="tileTraffic">
                <div class="row">
                    <div class="col-lg-8">
                        <h3>Traffic Rules</h3>
                    </div>
                    <div class="col-lg-4">
                        <h1>0</h1>
                    </div>
                </div>
            </div>
            <div class="col-lg-4" style="min-height:80px; background-color:antiquewhite" id="tileFood">
                <div class="row">
                    <div class="col-lg-8">
                        <h3>Food Policies</h3>
                    </div>
                    <div class="col-lg-4">
                        <h1>0</h1>
                    </div>
                </div>
            </div>
            <div class="col-lg-4" style="min-height:80px; background-color:cadetblue" id="tileMedical">
                <div class="row">
                    <div class="col-lg-8">
                        <h3>Medical Policies</h3>
                    </div>
                    <div class="col-lg-4">
                        <h1>0</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div id="myModalTraffic" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>
    <div id="myModalFood" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>
    <div id="myModalMedical" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">

                </div>
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $("#tileTraffic").click(function () {
            $('#myModalTraffic').modal('show');
            var html = "<div class=\"col-lg-12\"><div class=\"col-lg-4\"></div><div class=\"col-lg-8\"><p>Traffic Rules</p></div></div>";
            $("#myModalTraffic .modal-body").html(html);
            $("#myModalTraffic .modal-body").append(html);

        });
        $("#tileFood").click(function () {
            $('#myModalFood').modal('show');
        });
        $("#tileMedical").click(function () {
            $('#myModalMedical').modal('show');
        });
    </script>
</body>

</html>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

 var html = "<div class=\"row\"> <div class=\"col-lg-12\"><div class=\"col-lg-4\"></div><div class=\"col-lg-8\"><p>Traffic Rules</p></div></div></div>";

将 col 包裹在 row 中。col 是浮动的。这会导致 UI 对齐问题。 row 通过在伪元素中添加 clear: both; 来清除浮动

http://codepen.io/anon/pen/xRqoxj检查一下

【讨论】：

【解决方案2】：

或者，您可以定位模态中的列并使其不浮动。

.modal-body
{
  text-align: center;
}

.modal-body div[class^="col-lg-"] 
{
  float: none;
  width: 100%;
}

Codepen

【讨论】：