0

当页面宽度减小时（即在移动设备上看到的），我遇到了 jQuery Mobile 可折叠 div 没有缩小任何变窄的问题。我有它，所以页面上的所有其他元素都可以适当地缩放（宽度），但是可折叠的 div 过度拉伸了它们的边界，我不能让它们更小（比页面宽度更宽）。

切断可折叠的标题标签是好的，我只是不知道如何。我觉得这可能更像是一个概念性问题，但我发布一些代码仅供参考：

<table id="DataTable" style="width:100%" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <div id="row" class="Collapsible" data-role="collapsible" data-theme="c" data-content-theme="c" style="margin:0">
        <h3>Example header label (Can be covered)</h3>
        <p>Contents of the div on expand</p>
      </div>
    </td>
  </tr>
</table>
4

1 回答 1

0

.ui-btn-inner我认为问题在于:的 css 定义white-space: nowrap;。尝试用以下方法覆盖它：

.ui-btn-inner {
    white-space: normal !important;
}

另请参阅此示例。

=== 更新 ===

您可以添加以下 css 以将可折叠div（和h3）更改为内联元素：

.Collapsible, .Collapsible h3 {
    display: inline !important;
}

另请参阅我更新的示例。

于 2012-05-17T12:55:52.467 回答