bootstrap模态页脚问题

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

overiding .model-footer类将解决这一问题。

.model-footer{ 
border:none; 
} 

请让我知道这是否有帮助。

Answer 2

问题在于页脚的边框。你可以使用这个CSS来关闭边框：

.model-footer { 
    border-top:none; 
} 

它肯定会工作！