2017-09-04 48 views
0

嵌套問題,我有一個.aspx頁面自舉3格系統

.cDiv { 
 
    background-color: gray; 
 
} 
 

 
.tColor { 
 
    background-color:yellow; 
 
} 
 

 
.tColor2 { 
 
    background-color:blue; 
 
}
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-9 tColor"> 
 
     Level 1: .col-sm-9 
 
      <div class="row"> 
 
       <div class="col-sm-6 tColor2"> 
 
        Level 2: .col-sm-6 
 
       </div> 
 
       <div class="col-sm-6 cDiv"> 
 
        Level 2: .col-sm-6 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

的問題是,第二列變得比其父更廣泛的下面的代碼。我得到以下結果

enter image description here

+0

你必須刪除第二行。 –

+0

我需要一個嵌套的行,爲什麼我應該刪除它 –

+0

如果可能的話,刪除第二個'.row'並將'.col-sm-6'降低到'.col-sm-3' –

回答

0

我想你忘了,包括引導CSS

.cDiv { 
 
    background-color: gray; 
 
} 
 

 
.tColor { 
 
    background-color:yellow; 
 
} 
 

 
.tColor2 { 
 
    background-color:blue; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-9 tColor"> 
 
     Level 1: .col-sm-9 
 
      <div class="row"> 
 
       <div class="col-sm-6 tColor2"> 
 
        Level 2: .col-sm-6 
 
       </div> 
 
       <div class="col-sm-6 cDiv"> 
 
        Level 2: .col-sm-6 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

工作Demo

+0

爲什麼bootstrap.css不工作我已經添加了bootstrap.css鏈接到我的頁面,但它不工作,但贏了我包括bootstrap.min.css它的工作。其CDN也運行良好。爲什麼?您是從本地添加css文件還是使用外部鏈接添加 –

+0

? –

+0

我已經將它添加到本地 –