Question

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

这是我随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个框不会像我希望的那样扩展：

该行不完全是水平的，文本没有垂直居中并且没有响应。

有人可以告诉我我做错了什么吗？

Answer 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>

Answer 2

要使用引导程序类，您可以轻松实现此结构，下面是以下代码段，请参阅此代码以获取更多了解。

您可以在图像内容框中使用任何图像，其中将包含框尺寸，从不拉伸或挤压图像，并且始终通过定位显示图像的中心部分。

.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>

谢谢...

全高嵌套行和列Bootstrap 4

2 个答案: