Angular UI 手风琴 headers 的长文本和响应能力

Question

所以我正在玩 angular Bootstrap 指令并尝试实现手风琴控件，每个 header.[=15 的右侧显示一些信息=]

<accordion-heading>
    some text here, on the left side of the header.

    <div class="pull-right">
        <span>1st info</span>
        <span>2nd info</span>
        <span>maybe 3rd?</span>
    </div>                
</accordion-heading>

这是简化的 plunkr：http://plnkr.co/edit/3y0Rq1?p=preview

这在中型到大型屏幕上显示良好，但在较小的屏幕上，信息位于 header 行下方，在某些情况下，会与左侧文本拼接。

我确定有一个 css 技巧可以使这个场景看起来正确，方法是在较小的屏幕上扩展 header 的边框，但无法弄清楚。

请帮忙？

Answer 1

你可以这样做，在头部添加一个有两列的 table。第一列有数据 = "some text here, on the left side of the header."，第二列有数据 =“第一个信息第二个信息可能是第三个？”

  <table>
    <tr>
      <td>
        some text here, on the left side of the header.
      </td>
      <td>
        <div>
          <span>1st info</span>
          <span>2nd info</span>
          <span>maybe 3rd?</span>
        </div>
      </td>
    </tr>
  </table>

我已经在 plunker 中进行了更改。现在，当您将 window 尺寸变小时，手风琴 header 尺寸会相应增加。使用 float: left/right 或 pull-left/right 进行进一步更改。

希望对您有所帮助

Angular UI 手风琴 headers 的长文本和响应能力

Long text and responsiveness of Angular UI accordion headers

accordion

css-float

responsive-design

angularjs

angular-ui-bootstrap