Bootstrap屏幕

Question

我想創建一個帶引導CSS的屏幕布局，但作爲一個初學者，我掙扎太多。我有一行包含兩列。我需要將這兩列擴展到可用屏幕的底部，並且應該具有響應性。在第二欄中，我需要一個總是放在其底部的div。請參閱附件圖片。任何幫助，高度讚賞。

這裏是我做過什麼：

<div class="container"> 
     <div class="row"> 
      <div class="col-md-6 col-sm-6 bg-danger"> 
       left 
       <ul> 
        <li ng-repeat="x in [1, 2, 3, 4, 5, 6, 7]">{{x}}</li> 
       </ul> 

      </div> 
      <div class="col-md-6 col-sm-6 bg-info"> 
       right 
       <div> 
        <ul> 
         <li ng-repeat="x in [1, 2, 3, 4, 5, 6, 7]"> content {{x}}</li> 
        </ul> 
       </div> 

       <div class="nav bg-warning">nav</div> 
      </div> 
     </div> 
    </div> 

Answer 1

爲了使舒展全視你給他們的100％所有的高度

另一種選擇是對列使用視窗單位vh

html, body, .container, .row, .row > div { 
 
    height: 100%; 
 
} 
 
.bg-info { 
 
    position: relative; 
 
} 
 
.bg-info .nav { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: calc(100% - 30px); /* 2 * 15px padding */ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-6 bg-danger"> 
 
       left 
 
      </div> 
 
      <div class="col-xs-6 bg-info"> 
 
       right 
 
       
 
       <div class="nav bg-warning">nav</div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 2

希望下面的這些代碼可以幫助：

.constant{ 
 
    position:absolute; 
 
    bottom:0; 
 
    right:0; 
 
    }

<div class="row"> 
 
    <div class="col-md-6 col-sm-6"> 
 
    <!-- your content goes here--> 
 
    </div> 
 
    <div class="col-md-6 col-sm-6"> 
 
    <!-- your content goes here--> 
 
    <div class="constant"></div> 
 
    </div> 
 
    </div>

Answer 3

檢查了這一點。

.constant{ 
 
    position:absolute; 
 
    bottom:0; 
 
    right:0; 
 
    width:100%; 
 
    border: 2px solid #f60; 
 
    height: 40px; 
 
    } 
 
.cover-viewport { 
 
    height: 100vh; 
 
    border: 2px solid green; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-xs-6 cover-viewport"> 
 
    <!-- your content goes here--> 
 
    </div> 
 
    <div class="col-xs-6 cover-viewport"> 
 
    <!-- your content goes here--> 
 
    <div class="constant"></div> 
 
    </div> 
 
    </div>