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>

我想做的是在＆＃34; r-sec＆＃34; div我有4个盒子，总是适合＆＃34; l-sec＆＃34; DIV。请看附图。此外，我希望每个框的内容始终在框内完全水平居中。

我怎么能这样做？

Answer 1

1）你应该把你的col放在行

中

<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

4箱格栅响应，中心内容和容器右侧容器高度相同

2 个答案: