css - 引导模式页脚问题

Question

我在模态中发现引导页脚有一个小的 css 问题。有一条线穿过顶部。它似乎是由页脚引起的。我也有页眉的问题，但删除它并在页脚中注意到它。有没有人拿个峰看看是怎么回事？

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">

        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Get Started</button>

        <!-- Modal -->
        <div class="modal fade" id="myModal" role="dialog">

            <div class="modal-dialog modal-lg">
                <div class="modal-content modal-lg">

                    <p>
                        <h3 style="margin-left:30px;">We've simplified our processes...</h3>
                    </p>


                    <div class="modal-body modal-lg">
                        <div class="container col-md-12">
                            <div class="row">
                                <div class="col-md-1">
                                    <button type="button" class="btn btn-info btn-circle btn-lg"><i class="glyphicon glyphicon-cog"></i>
                                    </button>

                                </div>

                                <div class="col-md-11">
                                    <ul>
                                        <li>Spent xyz</li>
                                        <li>Spent xyz</li>
                                        <li>Spent xyz</li>
                                    </ul>
                                </div>


                            </div>
                            <button type="button" class="btn btn-primary btn-block">Annual campaign planning</button>
                            <br>
                            <div class="row">
                                <div class="col-md-3">
                                    <button type="" class="btn btn-primary">Plan It</button>
                                    <br>
                                    <ul>
                                        <li>1</li>
                                        <li>2</li>
                                    </ul>
                                </div>

                                <div class="col-md-3">
                                    <button type="" class="btn btn-primary">Create It</button>
                                    <br>
                                    <ul>
                                        <li>1</li>
                                        <li>2</li>
                                    </ul>
                                </div>

                                <div class="col-md-3">
                                    <button type="" class="btn btn-primary">Deliver It</button>
                                    <br>
                                    <ul>
                                        <li>1</li>
                                        <li>2</li>
                                    </ul>
                                </div>
                                <div class="col-md-3">
                                    <button type="" class="btn btn-primary">Measure It</button>
                                    <br>
                                    <ul>
                                        <li>1</li>
                                        <li>2</li>
                                    </ul>
                                </div>



                            </div>


                        </div>
                    </div>

                    <div class="modal-footer modal-lg">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>


                </div>
            </div>
        </div>
    </div>

Answer 1

重写 .model-footer 类将解决这个问题。

.model-footer{
border:none;
}

如果这有帮助，请告诉我。