全高嵌套行和列 bootstrap 4答案

【问题标题】：full height nested rows and columns bootstrap 4全高嵌套行和列 bootstrap 4
【发布时间】：2020-02-03 04:45:00
【问题描述】：

我正在尝试在我的网站上制作一个标题，如下所示：

这是我使用 Bootstrap 4 编写的代码。

<div class="container h400">
<div class="row h-100">
    <div class="col-md-8">
        <img src="//placehold.it/800x400" class="img-responsive">
    </div>
    <div class="h-100 col-md text-center align-self-center align-items-center">
        <div class="row h-50">
            <div class="col-md">1</div>
            <div class="col-md bg-dark text-white">2</div>
        </div>
        <div class="row h-50">
            <div class="col-md bg-secondary text-center text-white">3</div>
            <div class="col-md bg-primary text-white">4</div>
        </div>
    </div>
</div>  
</div>

还有这行css

.h400 {
    height: 400px;
}

但当我现场观看时，右侧的 4 个框并没有像我希望的那样展开：

该行不完全水平，文本未垂直居中且不响应。

谁能帮忙告诉我我做错了什么？

【问题讨论】：

标签： bootstrap-4 row col

【解决方案1】：

一些事情

BS4中的响应类是img-fluid；它是 BS3 中的 img-responsive
但是您会看到，当图像响应时，它不会符合 400 高度，这会导致图像下方出现空白
解决方法是选择适当大小的图像，尽管从右侧隐藏，但仍然可以传递有效的信息（这是我的代码中的第二个 DIV）

.h400 {
  height: 400px;
}

.removePadding {
  padding: 0 !important
}

.myCentreAlign {
  display: flex;
  justify-content: center;
  align-items: center;
}

.myImageStyle {
  height: 400px;
  overflow: hidden;
}

@media screen and (max-width:575px) {
  .myImageStyle {
    height: auto;
  }
  .secondDiv .myImageStyle img {
    height: auto;
    width: 100%;
  }
  .secondDiv.h400 {
    height: auto;
  }
  .theFourDiv .h-50 {
    height: 200px !important;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<h1> Responsive image case (lots of empty space under the image) </h1>
<div class="container h400">
  <div class="row h-100">
    <div class="col-8 removePadding">
      <img src="//placehold.it/800x400" class="img-fluid">
    </div>
    <div class=" col-4 h-100 ">
      <div class="row h-50">
        <div class="col-md text-center myCentreAlign">1</div>
        <div class="col-md bg-dark text-white myCentreAlign ">2</div>
      </div>
      <div class="row h-50">
        <div class="col-md bg-secondary text-white myCentreAlign">3</div>
        <div class="col-md bg-primary text-white myCentreAlign">4</div>
      </div>
    </div>
  </div>
</div>

<hr/>

<h1> non-responsive but delivers a good message </h1>
<div class="container h400 secondDiv">
  <div class="row h-100">
    <div class="col-12 col-sm-8 removePadding myImageStyle">
      <img src="//placehold.it/800x400" class="">
    </div>
    <div class=" col-12 col-sm-4 h-100 theFourDiv">
      <div class="row h-50">
        <div class="col-md text-center myCentreAlign">1</div>
        <div class="col-md bg-dark text-white myCentreAlign ">2</div>
      </div>
      <div class="row h-50">
        <div class="col-md bg-secondary text-white myCentreAlign">3</div>
        <div class="col-md bg-primary text-white myCentreAlign">4</div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

为了使用引导类，你可以很容易地实现这个结构这里是下面的sn-p，请参考这个代码以获得更多的理解。

您可以在图像内容框中使用任何图像，它将包含框大小永远不会拉伸或挤压您的图像，并且始终通过定位显示图像的中心部分。

.h400 {
  height: 400px;
  position: relative;
}
.h400 img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  min-height: 100%;
  min-width: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <title>Teste</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6 bg-dark text-white h400">
        <img src="https://im.rediff.com/news/2015/feb/11tulip8.jpg" alt="image">
      </div>
      <div class="col-md-6 h400">
        <div class="row h-100">
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-warning">
            <div class="w-100 text-center">1</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-danger">
            <div class="w-100 text-center">2</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-success">
            <div class="w-100 text-center">3</div>
          </div>
          <div class="col-md-6 d-flex align-content-center flex-wrap text-white h-50 bg-secondary">
            <div class="w-100 text-center">4</div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</body>
</html>

谢谢你...

【讨论】：

这对你有用吗，请在此处添加评论。