如何在兩列引導程序佈局中移動一列？

-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代碼將在手機屏幕上進行響應。 –

如果需要，您可以使用引導程序進行節內容管理和其他目的。 –

如何在兩列引導程序佈局中移動一列？

回答

相關問題