CSS引腳排列和格式問題

Question

我使用引導程序，我想我的DIV在左邊（淺灰色）被分成兩部分：col-md-3其中包含一個大的地圖引腳圖標和col-md-9其中將包含地址（以及與下一個框重疊的小箭頭）。

不幸的是，我所嘗試過的並不會返回預期的結果。增加的字體大小類沒有考慮到地圖pin（來自字體真棒），同樣適用於地址特定的類。

問題是什麼？

https://jsfiddle.net/un4tp74p/

我想什麼來實現：

我得到什麼：

<div class="container offset-60px"> 
     <div class="row"> 
      <div class="col-md-4 intro-boxes white-smoke"> 
       <div class="col-md-3 green"> 
        <i class="fa fa-map-marker map-pin"></i> 
       </div> 
       <div class="col-md-9"> 
        <p class="top-address-name">Company name</p> 
        <p class="top-address-street">address line 1</p> 
        <p class="top-address-street">address line 2</p> 
        <p class="top-address-tel">Tel number</p> 
       </div> 
      </div> 
      <div class="col-md-4 intro-boxes apple"> 
       <p>John Doe</p><span>Born in Japan</span> 
      </div> 
      <div class="col-md-4 intro-boxes chateau-green"> 
       <p>Jane Doe</p><span>Born in France</span> 
      </div> 
     </div> 
    </div><!--- END container --> 

CSS：

.map-pin { 
font-size: 58px; 

} 


.top-address-name { 
font-size: 18px; 
color: #4A4A4A; 
} 

.top-address-street { 
font-size: 18px; 
color: #37A187; 
} 

.top-address-tel { 
font-size: 14px; 
color: #4A4A4A; 
} 

Answer 1

檢查demo
1 - 如果你想添加嵌套網格，我的意思.col-xx-x內.col-xx-x你應該.row類包裝的第二個層次。
2-從.white-smoke div刪除display: flex;不影響網格。
屬性覆蓋有錯誤的第一個div。所以你應該這樣指定他們.intro-boxes.apple p, .intro-boxes.chateau-green p