CSS misc hizalama ve biçimlendirme sorunları ile bootstrap

Question

Ben bootstrap kullanıyorum ve DIV'm soldaki (açık gri renkte) 2 parçaya bölünmesini istiyorum: col-md-3 büyük bir harita pin simgesi ve col-md-9 Bu adres (ve bir sonraki kutuya üst üste gelen küçük bir ok) içerecektir.

Ne yazık ki denedim beklenen sonuçları vermez. Artan yazı tipi boyutu sınıfı, harita pini için dikkate alınmaz (yazı tipinden harika) ve aynı adrese özgü sınıflar için de geçerlidir.

Sorun nedir?

https://jsfiddle.net/un4tp74p/

elde etmek istiyorum Ne:

alıyorum Ne:

<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

Kontrol demo
1- iç içe geçmiş ızgara eklemek istiyorsanız, sana .row sınıfla ikinci seviyeye yerleştirilmeli .col-xx-x.col-xx-x içeride demek.
2- .white-smoke div kutusundan etkilenmemesi için display: flex; numarasını kaldırın.
3- .intro-boxes özellikleri, hataya sahip olan ilk div üzerinde geçersiz kılınır. Bu nedenle bunları .intro-boxes.apple p, .intro-boxes.chateau-green p