调整引导列大小时的对齐问题

Posted 2021-05-05

我有一个代码，其中包含两列的Bootstrap行。一个带文字，另一个带图像。当使用position:absolute调整浏览器窗口大小时，我添加了另一个div来将图像与中心对齐。现在图像对齐但行没有延伸到图像。

这是代码..

  <div class="container-fluid about">
      <div class="row">
        <div class="col-md-8 col-sm-8 col-xs-12 description">
            Some text here...
        </div>
        <div class="col-md-4 col-sm-4 col-xs-12 image">
           <div class="img-container">
              <img src="#" class="img-responsive">
           </div>
      </div>
    </div>    
 </div>

这是CSS ......

.about{
  margin-top:60px;
  min-height:300px;
  background-color:#1E8BC3;
}
.about .row {
  max-width:1000px;
  min-height:300px;
}

.about .description{
  padding-top:10%;
  padding-left:5%;
  font-size:16px;
  color:#fff;
  font-family: 'Josefin Sans', sans-serif;
}
.about .image{
  padding-top:5%;
  padding-left:0;
  padding-right:5%;
}
.img-container{
  position:absolute;
  width:100%;
  height:100%;
}
.img-container img{
  display:block;
  margin: 0 auto;
  max-width:250px;
  max-height:200px;
}

请帮我解释一下代码。

答案

我刚删除了下面的部分，现在它可以工作了！ :)

.img-container{
  position:absolute;
  width:100%;
  height:100%;
}