html - 如何在两列 Bootstrap 布局中向上移动一列？

Question

我有两列 Bootstrap 布局，顶部有一个标题图像。

<section class="header" style="background: url(header-image.jpg)"></section>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-6 sectionOne">
            <p>some long text</p>
        </div>
        <div class="col-md-6 sectionTwo">
            <form>My form here</form>
        </div>
    </div>
</div>

如何将右栏调高 (class= "sectionTwo")，以覆盖页眉背景图片(见下文)？

   ----------------
  |                |
  |  header image  |
  |        --------|
  |-------|        |
  |       |   2    |
  |   1   |        |
  |       |--------|
  |       |        |
   ----------------

我尝试在父级上使用 position: absolute 和 top: -100px 在子级上进行 CSS 相对定位，但这会导致 bootstrap 产生非响应式设计。

Answer 1

这段代码可以帮助您实现您想要的响应式布局:

.header{
	width: 100%;
	height: 100px;
	background: yellow;
}

.flexWrapper{
	display: flex;
}

.sectionOne{
	width: 50%;
	height: 200px;
	background: violet;
}

.sectionTwo{
	height: 200px;
	width: 50%;
	background: #3498DB;
	transform: translateY(-40px);
}

<div class="header">Header Image here</div>
<div class="flexWrapper">
  <div class="sectionOne">section 1</div>
  <div class="sectionTwo">section 2</div>
</div>

您可以根据需要更改 Transform 和其他属性。您不必为这种布局使用 Bootstrap。