Question

为什么下面例子中的angular-ui手风琴似乎不喜欢span元素？我最初将这些元素放在一种表格中（所以我知道它们有效）但决定将它们移到手风琴中，因为这是我正在寻找的功能。

我希望手风琴标题中的标题向左拉，标题中的复选标记按钮向右拉。

<accordion close-others="false">
<accordion-group data-ng-repeat="group in groups">
  <accordion-heading>
    <span class="pull-left">
      {{ group.title }}
    </span>
    <span class="pull-right">
      <button class="btn btn-success">&#10003;</button>
    </span>
  </accordion-heading>
  {{ group.content }}
</accordion-group>

http://plnkr.co/edit/rkbZ6h4tUnCOQ0swsngg

我是否可以首先使用手风琴作为按钮，或点击标题总是会干扰点击按钮？

Answer 1

根据How do you keep parents of floated elements from collapsing?

回答

<强> HTML

     <div class="clearfix">
      <span class="pull-left">
        {{ group.title }}
        </span>
      <button class="pull-right btn btn-success">&#10003;</button>
    </div>
  </accordion-heading>

<强> CSS

注意bootstrap已经为您提供了这个课程，因此您不需要自己创建它。

.clearfix:after {
      content: " ";
      display: block;
      height: 0;
      clear: both;

http://plnkr.co/edit/Y0sEXOSSjp3lee1ey9tm?p=info

Angular-ui-boostrap手风琴无法使用span元素正确格式化

1 个答案: