Question

我遇到了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>

Answer 1

我认为问题是.ui-btn-inner：white-space: nowrap;的css定义。尝试用：

覆盖它

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

另见this example。

=== UPDATE ===

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

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

另见my updated example。

jQuery Mobile可折叠div太广了

1 个答案: