如何将下拉菜单放入导航部分（Twitter Bootstrap）？答案

【问题标题】：How to put dropdown not into nav section ( Twitter Bootstrap )?如何将下拉菜单放入导航部分（Twitter Bootstrap）？
【发布时间】：2012-08-30 07:25:15
【问题描述】：

您好，我遇到了这个问题：我的标题中有两个部分，但是当我将下拉菜单放入导航部分时，它会像这样使我的标题崩溃：

如果我使用绝对位置，我的下拉菜单将移出 div 并在不同的显示器上看起来不同。

也许我解释得不好，所以我会给出我想要的图片：和下面的导航部分。

这是我的 HTML：

<div class="container">

<div class="navbar ">


 <div class="container">

    <div class="top">
        <div class="img">
          <a href="#" id="facebook" title="facebook"></a>

          <a href="#" id="linkedin" title="linkedin"></a>

          <a href="#" id="youtube" title="youtube"></a>
        </div>


          <ul class="nav nav-pills">
      <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">med@mail.com
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" style="display: none; ">
                <li><a href="/users/edit.6">My Account</a></li>

                <li><a href="/users/edit.6">Settings</a></li>

                <li><a href="/users/edit.6">Analytics</a></li>

                <li><a href="/users/sign_out" data-method="delete" rel="nofollow">Sign out</a></li>
              </ul>
            </li>   
          </ul>
        </div>
    </div>
    <div class="white_line"></div>
    <div class="grey_line"></div>              
   <ul class="nav pull-left">
      <li><a href="/">Home</a></li>
      <li><a href="/what_we_do">What we do</a></li>
      <li><a href="#">My account</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>

还有我的 CSS：

   .navbar .nav {
background-color: #f2f2f2;
float: left;
}

      .navbar .nav > li {
  padding-top: 0px;
   }

.navbar-inner{
padding:0px;
width:960px;
}

.navbar .nav > li > a{
 padding: 28px 25px 10px 0px;
}

 .navbar .nav-pills > li > a{
 padding-top:22px;
 }
 //top - top class with icons

.top{
height: 35px;
background: #c7dbaa;
}
.top .img:first-child{
 margin-bottom:1px;
 }
 .top .img{
 display:inline-block;
 padding: 5px 0 0 5px;
 }
.nav-pills{
 //here I need to change positioning or something like that
 }

【问题讨论】：

任何工作演示或 jsfiddle ？
@SACHIN，给我几分钟，我试着做一个 jsfiddle。
@SACHIN，在 jsfiddle 中看起来不错。 - jsfiddle.net/KckU3/12
@SACHIN，这是我在使用来自 jsfiddle 的代码时得到的结果 - i.imgur.com/bX7Jw.png。所以查看控制台，发现它正在使用 navbar nav li a css。
网站运行任何测试服务器??..我需要检查萤火虫

标签： html css twitter-bootstrap

【解决方案1】：

<div class="top row">
        <div class="img">
          <a href="#" id="facebook" title="facebook"></a>

          <a href="#" id="linkedin" title="linkedin"></a>

          <a href="#" id="youtube" title="youtube"></a>
        </div>

看到您需要在 class="top row" 上添加行，以便您的菜单会出现在导航中。然后您需要删除颜色和所有内容

【讨论】：

那么请附上你想要的截图……我没有完全得到你的要求
看问题，图2。
看到您需要在 class="top row" 上添加行，以便您的菜单会出现在导航中。然后您需要删除颜色和所有内容
我还有其他工作，所以还没有。我手动更改了颜色，希望它能正常工作。
我想是的，谢谢。如果有问题我会告诉你）