Question

我无法使用boostrap 4 css。

我想连续两个具有相同高度的jumbotron，无论内部是什么，并且div的内部垂直对齐中心。

我的代码如下：

<div class="container">
     <div class="row">
          <div class="col-8">
              <div class="jumbotron greenback">
                   <h7>Welcome to the Project test Detail page</h7>
              </div>
          </div>
          <div class="col-4">
              <div class="jumbotron greenback">
                  <div class="inner-score">
                      <div class="score-title">
                          <h6>Team Score</h6>
                      </div>
                      <div class="score-value">
                           <h4>85</h4>
                      </div>    
                  </div>

              </div>

          </div>
      </div>      
</div>

我创建了一个jsfidlle来显示https://jsfiddle.net/kscv67kt/2/ 正如您现在所看到的那样，两个jumbotron具有垂直文本对齐中心但不是完整的行高..

Answer 1

您是否尝试将height: 100%添加到jumbotron元素？

.jumbotron.greenback {
  height: 100%;
}

这将导致两个元素填充容器的高度（在这种情况下为.row）。

值得注意的是，设置height: 100%会导致元素的下边距溢出它的容器，所以为了整洁，你可以调整jumbotron及其容器的内容。因此，保证金底部属性......

.container {
  margin-bottom: 32px /* Moving the margin-bottom value of the 
  .jumbotron to it's outer container.  */
}

.jumbotron.greenback {
  height: 100%;
  margin-bottom: 0;
}

或者使用jQuery ......

$(document).ready(function() {

  var jumboMaxHeight = 0

  $(".jumbotron").each(function(){
    if ($(this).height() > jumboMaxHeight) { 
      jumboMaxHeight = $(this).height() }
    })

  $(".jumbotron").height(jumboMaxHeight)

})

编辑：要将文本元素置于.jumbotron中心，您可以通过多种方式实现它，一种是在父元素上使用flexbox属性（与jQuery解决方案一起使用） ...

.jumbotron.greenback {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

两个jumbotron连续与文本对齐的中心

1 个答案: