徽标和菜单栏之间的空的空间在bootstrap

时间:2014-06-03 14:38:46

标签: css twitter-bootstrap alignment

我正在为我的设计使用引导带。我使用导航栏进行下拉目的。当我尝试使用Logo时,在此菜单上方登录/注册它没有正确对齐。所以当我使用另一个导航栏时它是获得联盟,但两者之间空间很大。 link
以下是代码:

<

nav class="navbar navbar-static">
  <div class="navbar-header"> <a href="#project-link"> <img class="img-responsive col-md-4" src="final1.jpg"> </a>
    <div > </div>
    <div class="pull-right"> <a href="#myModal" data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-info">Sign In</a> </div>
    <div class="pull-right col-md-1"> <a href="#1" data-toggle="modal" data-target="#1" class="btn btn-primary btn-info">Sign Up</a> </div>
  </div>
</nav>

<nav class="navbar navbar-default navbar-static">
  <ul class="nav navbar-nav">
    <li class="dropdown dropdown-large"> <a href="http://rewardsinn.com/categories.php" class="dropdown-toggle navbar-brand" data-toggle="dropdown"></a> </li>
  </ul>
  <div class="navbar-header">
    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
    <a class="navbar-brand" href="http://rewardsinn.com/home2.php">Home</a> </div>
  <div class="collapse navbar-collapse js-navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="dropdown dropdown-large"> <a href="#" class="dropdown-toggle navbar-brand" data-toggle="dropdown">Categories<b class="caret"></b></a>

        <form class="navbar-form navbar-left"  method="post" action="search.php">
          <div class="form-group">
            <input name="search" type="text"  class="form-control" placeholder="Search for Store">
          </div>
          <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
        </form>
      </li>
    </ul>
  </div>
  <!-- /.nav-collapse --> 
</nav>

3 个答案:

答案 0 :(得分:0)

我不确定你在问什么,但如果是两个导航栏之间的空格你可以通过将margin-button:0添加到这样的导航栏静态来删除它

在你的CSS中

.navbar.navbar-static {
   margin-button:0
}

如果你想删除顶部空间

body {
  padding-top:0;
  margin-top:0;
}

答案 1 :(得分:0)

bootstrap中的导航栏默认边距为20px。您需要将其更改为0。

为您的顶级导航栏添加徽标

<nav class="navbar navbar-static no-margin">
....
</nav>

在样式表中

.no-margin{
margin-bottom: 0;
}

希望这有帮助。

答案 2 :(得分:0)

网站上的

body元素已margin-top: 50pxpadding-top: 50px删除它,您就可以了。

但是因为你的风格和#39;很难说要编辑哪个文件。结构完全搞砸了。编辑bootstrap.css不会有帮助,因为还有其他文件可以控制body元素的外观。就像Dev Tools中的这个神秘的home2.php:605一样,它导致了一些JS代码。

顺便说一句,StackOverFlow并不是人们在免费解决代码问题的网站。它根本不是关于它的。你错过了资源的观点,只是说。