4盒電網響應，中心內容和集裝箱右同一高度左

Question

我有這樣的HTML結構：

<section id="welcome-section"> 
    <div class="inner-container container"> 
    <div class="l-sec col-md-8"> 
     <div class="ravis-title-t-1"> 
     <div class="title"><span><h1>my title</h1></span></div> 
     <div class="sub-title"><h2>mysubtitle</h2></div> 
     </div> 
     <div class="content"> 
     description text goes here. 
     </div> 
    </div> 
    <div class="r-sec col-md-4"> 
     <div class="buttonsvalue"> 
     <div class="col-xs-6 buttonboxvalue"> 
      <a class="" href="#">Very Long Word</a> 
     </div> 
     <div class="col-xs-6 buttonboxvalue"> 
      <a class="" href="#">Very Long Word</a> 
     </div> 
     <div class="col-xs-6 buttonboxvalue"> 
      <a class="" href="#">Very Long Word</a> 
     </div> 
     <div class="col-xs-6 buttonboxvalue"> 
      <a class="" href="#">Very Long Word</a> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

我想要做的是，「R-秒」 DIV裏面我有4盒這總是適合「l秒」格的高度。請看附圖。 另外我希望每個盒子的內容總是在盒子內部垂直居中。

我怎麼能這樣做呢？

Answer 1

1），你應該把你的山坳裏排

<div class="row> 
    <div class="col-md-8></div> 
    <div class="col-md-4></div> 
</div> 

2）每個盒子的內容被垂直和水平居中的盒子裏。試試這個

.target { 
    margin: 0 auto; 
    text-align: center; 
} 

Answer 2

你錯過了相應的Bootstrap row聲明。圍繞l-sec和r-sec排了一排，然後圍繞着每兩個buttonboxvalues排成一行。

<section id="welcome-section"> 
    <div class="inner-container container"> 
    <div class="row"> 
     <div class="l-sec col-md-8"> 
     <div class="ravis-title-t-1"> 
      <div class="title"><span><h1>my title</h1></span></div> 
      <div class="sub-title"><h2>mysubtitle</h2></div> 
     </div> 
     <div class="content"> 
      description text goes here. 
     </div> 
     </div> 
     <div class="r-sec col-md-4"> 
     <div class="buttonsvalue"> 
      <div class="row"> 
      <div class="col-xs-6 buttonboxvalue"> 
       <a class="" href="#">Very Long Word</a> 
      </div> 
      <div class="col-xs-6 buttonboxvalue"> 
       <a class="" href="#">Very Long Word</a> 
      </div> 
      </div> 
      <div class="row"> 
      <div class="col-xs-6 buttonboxvalue"> 
       <a class="" href="#">Very Long Word</a> 
      </div> 
      <div class="col-xs-6 buttonboxvalue"> 
       <a class="" href="#">Very Long Word</a> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section> 

第二步是用JS找出主要內容容器的高度，然後應用到輔助容器：

// Get main container height, apply it to the secondary container 
var mainContainerHeight = $('.l-sec').height(); 
$('.r-sec').css('height', mainContainerHeight); 

我更新了codepen顯示的例子是如何工作的主要內容區域的不同高度： https://codepen.io/staypuftman/pen/QvKQVm