1

伙计们，

在使用 ui.bootstrap .. 的下拉切换时，该组件正在向我的菜单栏添加一个新行，而不是排成一行。

我在这里为它创建了一个 plunker。正如您将看到的那样，在 button3 和 button 4 之间，我插入了一个下拉切换，它打破了菜单栏并转到下一行。

http://plnkr.co/edit/gist:3662702

关于如何避免这种情况的任何线索？

我还将代码放在下面：

在 html 文件中：

  <body ng-controller="MainCtrl">
    <div class='btn btn-small' >Button1</div>
      <div class='btn btn-small' >Button2</div>
      <div class='btn btn-small' >Button3</div>

  <ul class="dropdown">
    <a class="dropdown-toggle">Drop-down menu</a>
    <ul class="dropdown-menu">
      <li ng-repeat="c in collection">
        <a>{{c.name}}</a>
      </li>
      <li class="divider"></li>

    </ul>
  </ul>

  <div class='btn btn-small' >Button4</div>

  </body>

在 .js 文件中：

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.collection = [{"name":"Angular"},{"name":"Bootstrap"}];
});
4

1 回答 1

2

好的，所以您的问题来自ul标签（带有 css 类下拉列表的标签）。在您的情况下，您应该编写如下内容：

<div class='btn btn-small' >Button3</div>
<span class="dropdown">
  <a class="dropdown-toggle">Drop-down menu</a>
  <ul class="dropdown-menu">
    <li ng-repeat="c in collection">
      <a>{{c.name}}</a>
    </li>
    <li class="divider"></li>
  </ul>
</span>
<div class='btn btn-small' >Button4</div>

请注意我如何将ul标签替换为span标签。默认情况下，ul 标签有一个 css 属性显示设置为阻止导致换行。使用 span 标签，显示设置为内联，确保行不会中断。

请参阅分叉的 plunker：http ://plnkr.co/edit/zKeIJczttqBUzO9OchJy

于 2013-09-09T15:20:37.907 回答