如何使用固定導航欄對準引導

假設我想設計是這樣 enter image description here 如何使用固定導航欄對準引導

，但是我現在有這個 enter image description here

我要修復的導航欄，以右對齊按鈕，使背景與背景顏色相同，我想將表格的容器居中並在下面有頁腳。這裏是我的html代碼

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="widh=device-width, initial-scale=1.0"> 
    <title></title> 
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"> 
    </head> 
    <body> 

    <div class="container"> 

     <header class="row"> 
     <div class="span12"> 

      <nav class="navbar"> 
      <div class="navbar-inner"> 
       <div class="container"> 
       <a href="#" class="brand"><img src="images/title_logo.png"/> 
       <ul class="nav"> 
       <li class="divider-vertical"></li> 
       <li><a href="index.html">Log in</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="register.html">Register</a></li> 
       <li class="divider-vertical"></li> 
       <li><a href="#">About</a></li> 
       <li class="divider-vertical"></li> 
       </div> 

      </div> 
      </nav> 
     </div> 

     <div class="row2" id="main-content"> 
      <div class="span4" id="sidebar"> 
      <div class="well"> 

       <form> 
       <fieldset class="register"> 
        <legend>Register</legend> 
        <input type="text" class="input-block-level"placeholder="first name"> 
        <input type="text" class="input-block-level"placeholder="last name"> 
        <input type="text" class="input-block-level"placeholder="email address"> 
        <input type="text" class="input-block-level"placeholder="confirm email address"> 
        <input type="text" class="input-block-level"placeholder="email address"> 
        <input type="text" class="input-block-level"placeholder="password"> 
        <input type="text" class="input-block-level"placeholder="confirm password"> 
        <img src="images/button_submit"/> 
       </fieldset> 


      </div> 
      </div> 
      <div class="span8"></div> 


     </div> 

     </header> 
    <div class="row"></footer> 

    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

我用引導的CSS

.navbar { 
    *position: relative; 
    *z-index: 2; 
    margin-bottom: 20px; 
    overflow: visible; 
} 

.navbar-inner { 
    min-height: 40px; 
    padding-right: 20px; 
    padding-left: 20px; 
    background-color: #F9F7F2; 
    background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); 
    background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); 
    background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); 
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); 
    background-repeat: repeat-x; 
    border: 0 solid #F9F7F2; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
      border-radius: 4px; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); 
    *zoom: 1; 
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); 
} 

.navbar-inner:before, 
.navbar-inner:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 

.navbar-inner:after { 
    clear: both; 
} 

.navbar .container { 
    width: auto; 
}

來源

2013-06-06 kev

想你的意思「假設」。我不認爲你可以想要的東西 - 除非別人告訴你想要你想要的（ – George

jsfiddle它與你有什麼 – Alex

我不知道如何jsfiddle它 – kev

用這樣的方式：

<div class="offset4 span4" id="sidebar">

來源

2013-06-06 10:32:19

如何使用固定導航欄對準引導

回答

相關問題