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＆amp; top: -100px，关于孩子，但这导致引导程序产生无响应的设计。

Answer 1

此代码可帮助您实现所需的响应式布局：

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

您可以根据需要更改Transform和其他属性。您不必使用Bootstrap进行此类布局。

如何在两列引导程序布局中向上移动一列？

1 个答案: