如何将导航栏移动到页面顶部

时间:2015-11-09 12:32:33

标签: html5 twitter-bootstrap css3 uinavigationbar

我的导航似乎不想移动到页面顶部。目前的情况如下:http://i.stack.imgur.com/9kjc5.png

我尝试添加try { FileSet.save(invalidFullPathToFileSet, fs); } catch (IOException e) { e.printStackTrace(); fail("Save name is invalid, should refuse save"); } ,但似乎无效。我从http://jsfiddle.net/jusuchyne/tupxwyqe/那里得到了例子。这是我的HTML代码:

margin-top: 0px

这就是css:

<div class="row nav1">
    <nav class="navbar navbar-inverse" id="top-menu" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <!-- Collapse navigation -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">HOME</a></li>
                    <li><a href="men.html">MEN</a></li>
                    <li><a href="#">WOMEN</a></li>
                    <li><a href="#">KIDS</a></li>
                    <li><a href="#">ACCESSORIES</a></li>
                    <li><a href="#">FOOTWEAR</a></li>
                    <li><a href="#">COSMETICS</a></li>
                    <li><a href="#">YOUR ACCOUNT</a></li>
                </ul>
                <!-- Search box -->
                <form class="navbar-form navbar-right">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                        <div class="input-group-btn">
                            <button class="btn btn-info" type="submit">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- End container-fluid -->
    </nav>
    <!-- End navbar-inverse -->
</div>

1 个答案:

答案 0 :(得分:0)

&#13;
&#13;
.navbar.navbar-inverse {
  font-family: 'Raleway', sans-serif;
  background: #444444;
}
.navbar.navbar-inverse .navbar-nav>.active>a {
  background: #000000;
}
.navbar.navbar-inverse .navbar-nav > li > a {
  color: #F2DEDE;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<div class="nav1">
  <nav class="navbar navbar-inverse navbar-static-top" id="top-menu" role="navigation">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse">	<span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>

        </button>
      </div>
      <!-- Collapse navigation -->
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="nav navbar-nav">
          <li class="active">	<a href="#">HOME</a>

          </li>
          <li>	<a href="men.html">MEN</a>

          </li>
          <li>	<a href="#">WOMEN</a>

          </li>
          <li>	<a href="#">KIDS</a>

          </li>
          <li>	<a href="#">ACCESSORIES</a>

          </li>
          <li>	<a href="#">FOOTWEAR</a>

          </li>
          <li>	<a href="#">COSMETICS</a>

          </li>
          <li>	<a href="#">YOUR ACCOUNT</a>

          </li>
          <!-- <li class="dropdown">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>

								<ul class="dropdown-menu">
								<li>
								<a href="#">Example1</a>
								</li>
								</ul>
								</li>
								-->
        </ul>
        <!-- Search box -->
        <form class="navbar-form navbar-right">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
            <div class="input-group-btn">
              <button class="btn btn-info" type="submit">	<i class="glyphicon glyphicon-search"></i>

              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- End container-fluid -->
  </nav>
  <!-- End navbar-inverse -->
</div>
&#13;
&#13;
&#13;

从第一行中删除.row。这完全没必要。请参阅docs以及您添加的15px的边距。