Question

所以我正在使用角度Bootstrap指令，并尝试实现手风琴控制，并在每个标题的右侧显示一些信息。

<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

这在中到大屏幕上显示得很好，但在较小的屏幕上，信息在标题的行下面，在某些情况下，用左侧文本进行加扰。

我确定有一个css技巧可以让这个场景看起来正确，通过在较小的屏幕中扩展标题的边框，但无法弄明白。

请帮帮忙？

Answer 1

你可以这样做，在头部添加一个包含两列的表格。第一列的数据=“这里有一些文字，在标题的左侧。”第二列有数据=“第一个信息第二个信息可能是第三个？”

  <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进行了更改。现在，当您缩小窗口大小时，手风琴标题大小会相应增加。使用float：left / right或pull-left / right进行进一步更改。

希望有所帮助

Angular UI手风琴标题的长文本和响应性

1 个答案: