Bootstrap中的容器類之外的行的背景顏色3

我有一個非常基本的設置，因爲我試圖弄清楚爲什麼會發生這種情況。我有一個容器div，並在該容器中有3行。我試圖將背景顏色附加到這些行中的某一行上，並且它確實有效，但是當我縮小到移動設備時，我看到了具有白色背景色的容器類，並且我的行背景顏色佔據了整個寬度而不是隻佔用容器剪輯內的空間。Bootstrap中的容器類之外的行的背景顏色3

這裏是我的HTML：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Learn</title> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet" href="css/styles.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <script src="js/respond.js"></script> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="contentContainer"> 
      <section class="row row-steps"> 
        <div class="col-xs-12 col-sm-4 track selectedTract"> 
         <div class="row"> 
          <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0"> 
           <h3><span>Step 1:</span> Choose a Track</h3> 
          </div> 
          <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0"> 
           <img src="img/badge-dashed-empty.png" alt="dotted circle"> 
          </div> 
         </div> 
        </div> 

        <div class="col-xs-12 col-sm-4 track"> 
         <div class="row"> 
          <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0"> 
           <h3><span>Step 2:</span> Choose a Course</h3> 
          </div> 
          <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0"> 
           <img src="img/badge-dashed-empty.png" alt="dotted circle"> 
          </div> 
         </div> 
        </div> 

        <div class="col-xs-12 col-sm-4 track"> 
         <div class="row"> 
          <div class="col-xs-10 col-xs-push-2 col-sm-12 col-sm-push-0"> 
           <h3><span>Step 3:</span> Choose a Lesson</h3> 
          </div> 
          <div class="col-xs-2 col-xs-pull-10 col-sm-12 col-sm-pull-0"> 
           <img src="img/badge-dashed-empty.png" alt="dotted circle"> 
          </div> 
         </div> 
        </div> 
      </section> 
     </div> 
    </div> 

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 

    </body> 
    </html>

CSS：

body{ 
    background-color: #f4f5f7; 
} 

.contentContainer{ 
    background-color: #fff; 
    border: 1px solid #dddddd; 
} 

.contentContainer.row-steps{ 
    background-color: #eaf2f5 !important; 
} 

.contentContainer img{ 
    height: 44px; 
    width: 44px; 
    margin: 5px; 
} 

.contentContainer h3{ 
    font-size: 14px; 
} 

.contentContainer h3 span{ 
    font-weight: bold; 
} 

.selectedTract{ 
    background-color: #63c4aa; 
    color: #fff !important; 
}

什麼我的結果是什麼樣子： enter image description here

我喜歡的顏色留的邊界內container div

來源

2014-11-23 icekomo

Apply overflow:hidden到容器：

.contentContainer{ 
    background-color: #fff; 
    border: 1px solid #dddddd; 
    overflow: hidden; 
}

來源

2014-11-23 22:37:16

謝謝，任何想法，爲什麼這不是默認行爲？我想爲此發生，你會想使用容器流體？ – icekomo 2014-11-23 22:46:14

這是因爲'.contentContainer img'具有5px的邊距。 – 2014-11-23 22:49:42

Bootstrap中的容器類之外的行的背景顏色3

回答

相關問題