第2列上的第1列覆蓋

我試圖實現移動視圖，第一列的第一列放在第二列的頂部。第2列上的第1列覆蓋

下面的代碼：

<div class="container-fluid"> 
     <div class="row"> 
      <div class="col-md-4"><div class="loginpart"><img id ="icon" src="../images/athletics-logo.png"/><h2>Athletes Profiling </h2> 
      <input type="button" class="login" name="login" value="Log In"/></div></div> 
      <div class="col-md-8" style="padding: 0"><img id ="header"/><div class="mantra"><h2>Go Wolves!</h2></div></div> 
     </div> 
    </div>

現在的問題是，我想loginpart類走在col-md-8的頂部上移動時。我試圖尋找答案，但沒有結束。我不希望它堆疊在一起。

A | B = A goes on top of B

如果執行或我的理解有問題，請教我。謝謝！

編輯：我試過推拉自舉功能，但它所做的是把第二列放在第一列下（這不是我所希望的），但是當切換到移動視圖時重疊兩列，而不是堆疊在彼此之上。

來源

2017-05-15 CodeCodeCode

的自舉上移動視圖上右上列]可能的複製（http://stackoverflow.com/questions/20979062/bootstrap-right-column-on-top-on- mobile-view） – XYZ

@XYZ編輯問題 – CodeCodeCode

嘗試使用絕對位置進行推送。您可以使用Z-index來獲取正確的列。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-md-4" style="position: absolute; z-index: 1;"> 
 
      <div class="loginpart"> 
 
       <img id ="icon" src="" /> 
 
       <h2 style="color: grey;">Athletes Profiling </h2> 
 
       <input type="button" class="login" name="login" value="Log In"/> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-8 col-md-push-4"> 
 
      <img id="header" src="" /> 
 
      <div class="mantra"> 
 
       <h2 style="color: blue;">Go Wolves!</h2> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-05-15 16:46:07 Jeppsen

這就是我一直在尋找的東西。謝謝！ – CodeCodeCode

第2列上的第1列覆蓋

回答

相關問題