简体   繁体   English

引导带,导航栏(固定位置)

[英]Bootstrap, navbar with fixed position

I have a navbar on the top of my html site. 我的html网站顶部有一个导航栏。 I recently wanted to change it so that the bar will always show on the page as the user scrolls down. 我最近想对其进行更改,以使该栏始终在用户向下滚动时显示在页面上。 I ran into a problem when doing this. 我这样做时遇到了一个问题。 For some reason, it takes the list and stacks it vertically when initially it is horizontally. 出于某种原因,它首先获取列表,然后将其垂直堆叠(最初是水平放置)。 I have been trying to find a solution for this but I am stuck. 我一直在试图为此找到解决方案,但我被困住了。 Here is what it looks like: I can not figure out how to keep the list horizontal, All help is greatly appreciated! 看起来是这样:我不知道如何保持列表水平,非常感谢所有帮助!

    <table>
    <!-- first row -->
    <tr>
         <!-- first column -->
        <td colspan="2" style="position: fixed; top: 0px; right: 50%">       
      <div class="navbar" style="text-align: center; margin: 0 auto;">
      <div class="navbar-inner">

      <div class="brand">

       <a href="www.investorsfortunes.com">

        Investorsfortunes.com 
      </a>
      </div>

<ul class="nav">
  <li class="divider-vertical"><a href="#">Investors</a></li>
  <li class="divider-vertical"><a href="#">Deals</a></li>
  <li class="divider-vertical"><a href="#">Attornies</a></li>
  <li class="divider-vertical"><a href="#">Appraisers</a></li>
  <li class="divider-vertical"><a href="#">Contact Us</a></li>

  <li class="login">

        <button class="btn btn-primary" id="loginBtn" >Login</button>

  </li>


    <li class="login">
            <button class="btn btn-primary" id="loginBtn" >Sign-Up</button>
    </li>
    </ul>
   </div>
  </div>


        </td>

         <!-- second column -->
        <td>

        </td>
         <!-- third column -->
        <td>

        </td>

    </tr>
   </table>

wrap your nav bar in between these div elements 将导航栏包裹在这些div元素之间

<div id="navbar" class="navbar navbar-fixed-top ">

</div>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM