學習引導：列堆疊，在調整大小時需要新的堆棧行

我正在學習Angular和Bootstrap以獲得可能的工作，所以我正在製作一個簡單的演示頁面。我無法在調整大小時在上一行的最後一個div後面堆疊新行。我有一個頁面，看起來像這樣當它的全尺寸：學習引導：列堆疊，在調整大小時需要新的堆棧行

Picture 
|Text12 p col| 
Btn 
Btn

我想要的元素堆疊像這樣：

Picture|Text|Btn|Btn <- Row 1 
[ hidden div  ] 
| 12 point col | <- Row 2

現在，當我調整下會發生以下情況

Picture 
Text 
Btn 
Btn 
|12 pt col|

請參閱下面的代碼。我確信有一些基本的東西我還不知道。我對列類型不太挑剔，我只是想讓堆棧工作。

<div class="container-fluid" id="mainFrame" ng-controller="mainController"> 
     <div class="row" id="row1"> 
     <div class="col-sm-2"> 
      <img src="img/blah.jpg"> 
     </div> 
     <div class="col-sm-4" id="nameplate"> 
      <p>Lorem Ipsum</p> 
      <p>sit amet dolor</p> 
      </br> 
      <p>Demo Page</p> 
      <p>Frameworks: Angular and Bootstrap</p> 
     </div> 
     <div class="col-sm-3"><div class="btn" id="bluebtn"><p>Push Me!</p></div></div> 
     <div class="col-sm-3"><div class="btn" id="redbtn"><p>Push Me!</p></div></div> 
     </div> 

<!-----------------Top of hidden row--------------------------> 
<div class="jumbotron container-fluid" ng-show="false"></div> 

<!-----------------Top of row 3--------------------------> 


<div class="col-sm-12"><p>Test</p><p>Blah</p><p>Blah</p></div> 


</div>

這是我的CSS：

img 
{ 
    height:30vh; 
    padding:1vh 1vw; 
    position:relative; 
    top:8vh; 

} 


div 
{ 
    border: 1px solid black; 
} 

.row div 
{ 
    height:100%; 

} 

.row div div 
{ 
    height:30px; 
} 

#nameplate 
{ 
    vertical-align: bottom; 
    margin: auto; 
    text-align:center; 

} 

#nameplate p 
{ 
    margin:2vh 2vw; 

} 

#mainFrame 
{ 
    height: 100%; 

}

任何幫助表示讚賞！謝謝。

來源

2016-08-06 ep84

請小提琴，以便更容易爲我們編輯代碼 –

我發現了一個（JS）小提琴是什麼，但我可以不能讓它工作。我無法獲得我需要的庫（Angular，Bootstrap）來工作或複製問題。我很抱歉，我不能提供太多幫助。我非常喜歡網頁開發。我的世界是軟件。 – ep84

你可以得到圖書館，看看左邊的菜單 –

您需要爲不同的屏幕尺寸添加不同的列規格。這是響應行爲的責任。你可以看到工作的代碼片段below--

<!DOCTYPE> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Secure Login: Protected Page</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
      
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
      </head> 
 
      <body> 
 

 
<div class="container-fluid" id="mainFrame" ng-controller="mainController"> 
 
     <div class="row" id="row1"> 
 
     <div class="col-sm-2 col-md-2 col-lg-2 "> 
 
      <img src="img/blah.jpg"> 
 
     </div> 
 
     <div class="col-sm-4 col-md-4 col-lg-4" id="nameplate"> 
 
      <p>Lorem Ipsum</p> 
 
      <p>sit amet dolor</p> 
 
    
 
      <p>Demo Page</p> 
 
      <p>Frameworks: Angular and Bootstrap</p> 
 
     </div> 
 
     <div class="col-sm-3 col-md-3 col-lg-3"><div class="btn" id="bluebtn"><p>Push Me!</p></div></div> 
 
     <div class="col-sm-3 col-md-3 col-lg-3"><div class="btn" id="redbtn"><p>Push Me!</p></div></div> 
 
     </div> 
 

 
<!---Top of hidden row--> 
 
<div class="jumbotron container-fluid" ng-show="false"></div> 
 

 
<!---Top of row 3--> 
 

 

 
<div class="col-sm-12 col-md-12 col-lg-12"><p>Test</p><p>Blah</p><p>Blah</p></div> 
 

 

 
</div> 
 
</body> 
 
    </html>

來源

2017-01-19 14:30:41 neophyte

學習引導：列堆疊，在調整大小時需要新的堆棧行

回答

相關問題