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

-1

我有两列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 |  | 
    |  |--------| 
    |  |  | 
    ----------------

我试着CSS相对定位父与position: absolute & top: -100px，对孩子，但是造成引导产生无响应的设计。

来源

2017-06-29 blsn

我想在手机上看到'sectionTwo'，与现在一样。 – blsn

我不打算添加它。 – blsn

您可以在'sectionTwo'类中添加负边距，但是在较小的设备上它会超过'sectionOne'类，所以您需要检查断点并删除边距 – Shibi

这代码可以帮助你实现响应布局你想：

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

 
.flexWrapper{ 
 
\t display: flex; 
 
} 
 

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

 
.sectionTwo{ 
 
\t height: 200px; 
 
\t width: 50%; 
 
\t background: #3498DB; 
 
\t 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>

你可以根据你的需要改变变换等性能。您不必为这种布局使用Bootstrap。

来源

2017-06-30 09:00:07

引导程序需要使其响应，即适应手机屏幕。 – Rithwik

此Flex代码将在手机屏幕上进行响应。 –

如果需要，您可以使用引导程序进行节内容管理和其他目的。 –

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

回答

相关问题