如何將第二個項目放置到導航欄中

這裏有很多html，但對於任何使用bootstrap站點的人來說，它應該看起來非常熟悉。如何將第二個項目放置到導航欄中

<body> 
<section class="container-fluid"> 
    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container-fluid"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
       <a class="brand" href="/">Home</a> 
       <div class="nav-collapse"> 
        <ul class="nav"> 
         <li><a href="#">One</a></li> 
         <li><a href="#">Two</a></li> 
         <li><a href="#">Three</a></li> 
        </ul> 
        <ul class="pull-right nav"> 
         <li class="dropdown"> 
          <a href="##" class="navbar-link dropdown-toggle" data-toggle="dropdown"> 
           Your name here 
          </a> 
          <ul class="dropdown-menu"> 
           <li><a href="/Profile/Profile.cfm">Profile</a></li> 
           <li><a href="/?logout">Logout</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 
    <form> 
     <textarea name="Comment"></textarea> 
     <div class="form-actions"> 
      <input type="submit" name="Save" value="Save"> 
     </div> 
    </form> 
</section> 
</body>

我能夠把「保存」按鈕，在屏幕的右上角部分有這個CSS：

.form-actions { 
    position:absolute; 
    right:0; 
    top:25px; 
}

我想要做的就是給它一個定點頂級屬性。換句話說，當用戶向下滾動時它不會滾動屏幕。

我可以改變HTML，CSS，任何必要的實現這個目標。例如，現在「你的名字在這裏」位於導航欄的右側，但那是一時興起的 - 這不是必需的。

來源

2013-01-11 Phillip Senn

我不完全清楚你想要最終頁面的樣子，但這是一個開始嗎？
http://jsfiddle.net/panchroma/R5Q3W/

最重要的一點是，表格是你想要什麼「spy'on，所以我把它包在一個容器div像這樣：

<div class="formWrapper" data-spy="affix" data-offset-top="10"> 
<form> ...... </form> 
</div><!-- close formWrapper div -->

（數據偏移頂部是距離頁面需要

然後我說這個CSS定義要發生在這個div是什麼時，它的貼將粘貼動作踢式前滾動）

.formWrapper.affix{ 
right:0; 
top:25px; 
width:100%; 
}

希望這有助於！

來源

2013-01-11 23:03:24

哇！這非常有趣！讓我檢查一下！ –

如何將第二個項目放置到導航欄中

回答

相關問題