html - 如何将下拉菜单不放入导航部分(Twitter Bootstrap)？

Question

你好，我遇到了这个问题:我的标题中有两个部分，但是当我将下拉列表不放入导航部分时，它会像这样使我的标题崩溃:

如果我使用绝对位置，我的下拉菜单将移出 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
 }

Answer 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"上添加行，这样你的菜单就会出现在导航中。然后你需要删除颜色和所有东西