引導程序中的對齊4

Question

我正在嘗試引導引導程序4中的一些內容。它不以我想的方式工作，我不明白爲什麼。具體而言，我無法垂直或水平對齊列中的內容。例如，在這個Bootply，我有以下幾點：

<div class="container"> 
<div class="row"> 
    <div class="col-8"> 
    <h2 class="display-4">Some Text</h2> 
    <p class="lead"> 
     Some other details go here. This portion can go up to three lines of text. It will wrap around to the next line. A YouTube video will be available in the right side. 
     It's not there because Bootply doesn't allow iframes. 
    </p> 
    </div> 

    <div class="col-4"> 
    <div style="border:solid 2px #ddd;"> 
     A vertically centered YouTube video. 
    </div> 
    </div> 
</div> 


<div class="row"> 
    <div class="col-4"> 
    <div class="card"> 
     <div class="card-block"> 
     <div class="row"> 
      <div class="col-3"> 
      <div class="fa fa-arrow-right" style="font-size:3.0rem;"></div>          
      </div> 

      <div class="col-9"> 
      <h3 class="card-title">Detail</h3> 
      <p class="card-text">Here's some more info for you. This could go up to three lines of text. How do I center the arrow?</p>            
      </div> 
     </div> 
     </div> 
    </div>   
    </div> 
</div> 
</div> 

如何垂直對齊在YouTube視頻，以便它的中心？我如何垂直對齊箭頭以使其居中？我似乎甚至不能讓箭頭水平居中。我嘗試使用justify-content-center提到here沒有任何運氣。我究竟做錯了什麼？

Answer 1

您需要使用嵌套Flexbox的

.col-3 { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    } 

Bootply