Question

我正在尝试制作一个bootstrap导航（v2.3.2），格式如下：

此：
wrong http://tastytreatthursday.com/nav1.jpg

而不是：
wrong http://tastytreatthursday.com/nav2.jpg

<div class="navbar visible-desktop visible-tablet">
<div class="navbar-inner">
    <a class="brand" href="http://myurl" style="margin:0; padding:0;"><img style="z-index:1; position:relative;" height="125px" width="125px" src="myLogo.png"></a>
<ul class="nav nav-pills">
<!--item-->
  <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
  Test title<span class="caret"></span>
</a>
<ul class="dropdown-menu">
  <li><a href="#">Test 1</a></li>
  <li><a href="#">Test 2 Test 2 Test 2</a></li>
  <li><a href="#">Test 3</a></li>
  <li><a href="#">Test 4</a></li>
</ul>
</li>
<!--item-->
</ul>
</div>
</div>

有谁可以指出我做错了什么？

Answer 1

用你的小提琴回答你的问题会更容易。看起来您可能已对CSS进行了更改，如http://jsfiddle.net/Wa5vS/中所示，它似乎与您的相同HTML一起正常工作。

即使您添加：

.dropdown-menu {
    text-align: center;
}

正确显示，因此您必须更改某些内容。

Answer 2

我尝试了你的代码，它对我有用。 Makere你把它放在一个行类和另一个span类中。当我把代码放在一个魅力的时候。

<section class="row-fluid ">
    <aside class="span12">
      <div class="navbar visible-desktop visible-tablet">
        <div class="navbar-inner"> <a class="brand" href="http://myurl" style="margin:0; padding:0;"><img style="z-index:1; position:relative;" height="125px" width="125px" src="wp-content/themes/img/lcva_logo.png"></a>
          <ul class="nav nav-pills">
            <!--item-->
            <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Test title<span class="caret"></span> </a>
              <ul class="dropdown-menu">
                <li><a href="#">Test 1</a></li>
                <li><a href="#">Test 2 Test 2 Test 2</a></li>
                <li><a href="#">Test 3</a></li>
                <li><a href="#">Test 4</a></li>
              </ul>
            </li>
            <!--item-->
          </ul>
        </div>
      </div>
    </aside>
  </section>

Bootstrap下拉列表未正确对齐

2 个答案: