【问题标题】:How to float div up?如何让 div 向上浮动?
【发布时间】:2014-02-05 01:18:35
【问题描述】:

我在不同的 div 中有一个菜单和一个子菜单。他们之间有一个空间。我怎样才能让它们看起来像一个完整的菜单?我将引导导航栏用于主菜单,将简单导航用于子菜单。我是css的新手。这就是我所拥有的:

<div class="navbar navbar-inverse">
  <div class="navbar-inner">
    <a class="brand" href="#">Website Logo</a>
    <ul class="nav">
      <li class="active"><a href="#">DashBoard</a></li>
      <li><a href="#">Docs</a></li>
      <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown"  href="#">Account<b class="caret"></b></a>
        <ul class="dropdown-menu" style="width: 250px;">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">LogOut</a></li>
        </ul>
       </li>
    </ul>
  </div>
</div>
<div>
<ul class="nav nav-pills">
  <li class="active">
    <a href="#">Stats</a>
  </li>
  <li><a href="#">Api Calls</a></li>
  <li><a href="#">Settings</a></li>
</ul>
</div> 

jsfiddle
我只想删除它们之间的空间。

还有一个小问题:
我怎样才能摆脱按钮和它的下拉之间的小插入符号? (帐户导航项与其下拉列表之间的白色三角形)

【问题讨论】:

  • @Kevin Bowersox 在下面说了什么。另外,将其添加到您的 CSS 文件中应该可以消除小三角形:.navbar .nav&gt;li&gt;.dropdown-menu:after { display: none !important; }

标签: html css twitter-bootstrap


【解决方案1】:

您的第一个问题可以通过删除类导航栏的默认margin-bottom 来回答:

.navbar {
    margin-bottom:0
}

现在,关于您的第二个问题。在您的下拉菜单中有一个使用边框创建的三角形。你可以用这个 css 禁用它:

.navbar .nav > li > .dropdown-menu:after {
    border:none;
}

【讨论】:

  • @oleg.foreigner 很高兴为您提供帮助!你可以接受我的回答;)
【解决方案2】:

添加以下 CSS 以删除边距:

.navbar{
    margin:0px;
}

JS 小提琴: http://jsfiddle.net/eszf7/3/

【讨论】:

  • .navbar 有一个 margin-bottom 由 bootstrap.css 应用
猜你喜欢
  • 2012-12-13
  • 2023-03-28
  • 1970-01-01
  • 2015-01-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多