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; 
} 

它肯定會工作！