Question

我正在使用自举网格，我希望实现一个响应式布局，如下图所示：

也就是说，第一个布局是针对md，lg和xl设备，左边是图像，右边是一些信息。这个右边信息的div应该具有相同的图像高度。

然后在较小的设备中，我想让布局适应下面的图像，图像位于上方和下面的信息中。

但它无法正常工作：

细节div出现在右边，但我希望这个细节div占据图像的整个高度，内容也占据整个高度，所以我使用display：flex;弯曲方向：柱;辩解内容：空间 - 间隔;但内容并未占据全高
另一个问题是，在超小型和小型设备中，我希望将图像放在细节div上方，但我在所有设备中总是采用相同的布局。

你知道如何妥善解决这个问题吗？

有两个问题的工作示例：https://jsfiddle.net/h4pggx0u/1/

HTML：

<div class="container py-md-5">
  <div class="row">
    <div class="col col-md-10 px-0">
      <img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
    </div>
    <div class="col col-md-2 px-0" style="border:1px solid gray;">
      <div class="details-title">
        <span class="font-size-sm font-weight-semi-bold">Info</span>
        <h1 class="h5 mb-0 title">Title</h1>
        <a href="" class="btn btn-primary btn-block link">Link</a>
      </div>
    </div>
  </div>
</div>

的CSS：

.details-title{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid gray;
  padding: 1rem 1rem 1rem 1rem;


  .title{
    margin-top: 1rem;
  }

  .link{
    margin-top: 1rem;
  }
}

Answer 1

你需要为小屏幕定义你的类，它需要完整的网格，即col-sm-12像这样

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container py-md-5">
  <div class="row">
    <div class="col-md-10 col-sm-12 px-0">
      <img style="width: 100%; height: auto" src="http://via.placeholder.com/1000x400"/>
    </div>
    <div class="col-md-2 col-sm-12 px-0" style="border:1px solid gray;">
      <div class="details-title">
        <span class="font-size-sm font-weight-semi-bold">Info</span>
        <h1 class="h5 mb-0 title">Title</h1>
        <a href="" class="btn btn-primary btn-block link">Link</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您已经有了一个完全可以接受的答案，但我想提供以下代码作为次要替代方案。此代码依赖于一组不同的Bootstrap类来实现类似的结果：

.img-fluid替换了第一列<image>上内联样式的需求。
.no-gutters取代了覆盖每列填充的需要。
.col-sm-*已替换为.col-*以反映最小的可能视口。
.border取代了在第二列上应用内联边框的需要，虽然它默认明显更轻。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<div class="container">
  <div class="row no-gutters">
    <div class="col-12 col-md-10">
      <img src="http://via.placeholder.com/1000x400" class="img-fluid" />
    </div>
    
    <div class="col-12 col-md-2 p-3 border">
      <div class="details-title">
        <span class="font-size-sm font-weight-semi-bold">Info</span>
        <h1 class="h5 mb-0 title">Title</h1>
        <a href="#null" class="btn btn-primary btn-block link">Link</a>
      </div>
    </div>
  </div>
</div>

如何正确使用网格来实现这种布局？

2 个答案: