將頁腳元素放置在div的底部而不使用margin - bootstrap

我正在嘗試使用bootstrap將頁腳放到div的底部而不對div應用頁邊距我想推到div的底部作爲頁腳。這是我的嘗試，但頁腳對齊頂部將頁腳元素放置在div的底部而不使用margin - bootstrap

<div style="background-color:#191919;" class="container"> 
    <h3 style="color: #32CD32; font-family: Copperplate; align:left;"> 
    HEADER TEXT 
    </h3> 
    <h5>... reaching out</h5> 
    <hr style="width:101.6%;"> 


    <div class="col-lg-12"> 
     <nav id="main_menu"> 
      <div align="center" class="menu_wrap"> 

      </div> 
     </nav> 
     <div class="row"> 
      <div class="contents"> 
       The contents in each page 
      </div> 
     </div> 


     <footer style="color:#fff; text-align:center;"> &copy 2016 All rights reserved 
      <br> For more information visit our website 
     </footer> 
    </div> 

</div>

請如何將頁腳放在底部。

來源

2016-10-17 user6731422

能否請您添加的代碼示例？ codepen或jsfiddle –

這是我製作的一個plunk >>>>>>> http://plnkr.co/edit/Zwd5DYo2VcZY7DCNQCTg?p=preview – user6731422

你的代碼實際上是正確的。但是你沒有關閉一些div。，如果你使用頁腳，你將不需要CSS。關閉你的div :) –

有多種方式做到這一點，我想對你更快的方法是這樣的情況下使用的頁腳position: absolute;

首先將你的頁腳從.col-lg-12移出，直接作爲.container的子項。我還增加了一個類.myFooter

<footer class="myFooter"> 
     copy 2016 All rights reserved 
     <p>You can visit our website for more info</p> 
</footer>

然後css。不要在標記上內嵌css。我將顏色和文本對齊移動到了課程中。

.myFooter { 
     color:#fff; 
     text-align:center; 
     position: absolute; 
     bottom: 0; 
}

的最後一步是添加position:relative到.container。這樣，position:absolute就.myFooter正常工作。

.container { 
     position: relative; 
}

這裏是一個工作示例： http://plnkr.co/edit/Ypl82cdqxuHFIjAcpRo8?p=preview

來源

2016-10-17 07:59:59

是這種bootrap方法 – user6731422

你是什麼意思bootstrap方法？ Bootstrap只是一個框架，你如何使用它的代碼來完成你的任務取決於你... –

文本浮動到左側 – user6731422

<html> 
<head> 

<title> 
Lugah Salisu Foundation 
</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
crossorigin="anonymous"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script> 
<style type="text/css"> 

@media (max-width: @screen-xs) { 
    body{font-size: 10px;} 
} 

@media (max-width: @screen-sm) { 
    body{font-size: 14px;} 
} 


h3{ 
    font-size: 300%; 
    margin-bottom: 0px; 
    clear: both; 
    margin-left: 7px; 
} 
h5{ 
    margin-top: 0px; 
    padding: 0px; 
    margin-left: 15px; 
    color: #fff; 
    margin-bottom: 1px; 
    clear: both; 
} 
hr{ 
    margin: 0px; 
} 

.container { 
    width: auto; 
    margin-left: 200px; 
    margin-right: 200px; 
    height:500px; 
    max-height:500px !important; 
    padding-left: 0px; 
    } 

.nav>li { 
    position: relative; 
    display: inline-block!important; 
} 
.nav>li>a:focus, .nav>li>a:hover { 
    text-decoration: none; 
    background-color:transparent!important; 
    color:#d3d3d3; 
} 
.nav>li>a { 
    padding: 10px 4px!important; 
    color:#fff; 

} 

.golden-base { 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    font-weight:bold; 
    -webkit-margin-before: 0.3em; 
    -webkit-margin-after: 0.2em; 
} 
.golden1 { 
    background-image: -webkit-linear-gradient(#FFF65C, #3A2C00); 
    text-shadow: -0.02em -0.03em 0.005em rgba(255, 223, 0, 0.60); 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 


</style> 

</head> 

<body style="background-color:#1f5060;"> 

<div style="background-color:#191919;" class="container"> 
<h3 style="color: #32CD32; font-family: Copperplate; align:left;"> 
HEADER TEXT 
</h3> 
<h5>... reaching out</h5> <hr style="width:101.6%;"> 


<div class="col-lg-12"> 
       <nav id="main_menu"> 
           <div align="center" class="menu_wrap"></div> 
            <ul class="nav sf-menu"> 
            <li class="sub-menu"><a href="home.html"><small>Home</small></a></li> |      
            </ul> 
           </div> 
</div> 
</nav> 
    <footer style="color:#fff; text-align:center;"> &copy 2016 All rights reserved 

<div class="row"> 
<div class="contents"> 
The contents in each page 
</div> 
</div>       





</div> 
</footer> 

</body> 
</html>

來源

2016-10-17 07:56:49

將頁腳元素放置在div的底部而不使用margin - bootstrap

回答

相關問題