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