Bootstrap 4 - 如何实现这种布局答案

【问题标题】：Bootstrap 4 - How to achieve this layoutBootstrap 4 - 如何实现这种布局
【发布时间】：2020-05-30 12:06:31
【问题描述】：

我目前在一个网站上工作，我遇到了以下问题，思考使用 Bootstrap 4 实现以下布局的最佳实践。（用红色包裹）

如您所见，第一列是 col-md-7，另一列是 col-md-5。但是，第一列包含一个图像，它必须触摸页面的左角。但是，右列必须具有标准宽度和列大小。为了让您更深入地了解以下是我想要实现的目标。

[JS Fiddle][2]

【问题讨论】：

现在为什么要担心 Bootstrap 的结构和类？我强烈建议使用 CSS 网格来研究本机浏览器功能。 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
好点亚伦。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

您需要将左图像和右列包装在一行中，为每个设置列宽，然后将每个项目以全宽放置在该 div 内的右列中。

我想如果你继续在 SO 上问“为我做”的问题，你会被烤死，我知道我有。但我是来帮忙的。 LMK 如果您想了解更多详细信息。

这个问题有一百万种解决方案，这将是研究 CSS Grid 并学习新知识的好时机。

Here is a codepen of the general approach

<div class="row">
  <div class="col-md-7 left-box"></div>

  <div class="col-md-5">
    <div class="col-md-12 item"></div>
    <div class="col-md-12 item"></div>
    <div class="col-md-12 item"></div>
  </div>  
</div>

【讨论】：

【解决方案2】：

您的意思是使用align-self-start 类？

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.image {
  height: 200px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<div class="container">
  <div class="row d-flex">
    <div class="col image">
      Image
    </div>
    <div class="col align-self-start">
      Test
    </div>
  </div>
</div>

【讨论】：