如何在網格中放置非插入列表

Question

我需要將可摺疊列表視圖放入響應網格中，但我需要可摺疊和listview爲inset = false，因此它需要iphone的全部寬度尺寸。

但插圖功能似乎並沒有與電網兼容...

這裏是我的非工作測試：

<!-- Home --> 
<div data-role="page" id="page1"> 
    <div data-role="content"> 
<div class="ui-grid-a ui-responsive"> 
      <div class="ui-block-a"> 
          <div data-role="collapsible-set" data-theme="b" data-content-theme="d" data-inset="false" id="custom-collapsible"> 
       <div data-role="collapsible"> 
        <h2> 
         Préconisations 
         <span class="ui-li-count preco-count">0</span> 
        </h2> 
       <ul data-role="listview" data-divider-theme="b" data-inset="false" id="custom-listview"> 
        <li data-role="list-divider" role="heading"> 
         Divider 
        </li> 
        <li data-theme="c"> 
         <a href="#" data-transition="slide"> 
          Button 
         </a> 
        </li> 
        <li data-theme="c"> 
         <a href="#" data-transition="slide"> 
          Button 
         </a> 
        </li> 
        <li data-theme="c"> 
         <a href="#" data-transition="slide"> 
          Button 
         </a> 
        </li>      
       </ul> 
           </div> 
       </div> 
      </div> 
      <div class="ui-block-b"> 
       other content, which apear at tje left of the grid on large screens, and at the bottom on small screens 
      </div> 
     </div> 
    </div> 
</div> 

http://jsfiddle.net/nmZhz/3/

感謝

Answer 1

工作示例：http://jsfiddle.net/Gajotres/nmZhz/2/

HTML：

<!-- Home --> 
<div data-role="page" id="page1"> 
    <div data-role="content"> 
     <div class="ui-grid-a ui-responsive"> 
      <div class="ui-block-a"> 
       <ul data-role="listview" data-divider-theme="b" data-inset="false" id="custom-listview"> 
        <li data-role="list-divider" role="heading"> 
         Divider 
        </li> 
        <li data-theme="c"> 
         <a href="#" data-transition="slide"> 
          Button 
         </a> 
        </li> 
        <li data-theme="c"> 
         <a href="#" data-transition="slide"> 
          Button 
         </a> 
        </li> 
        <li data-theme="c"> 
         <a href="#" data-transition="slide"> 
          Button 
         </a> 
        </li>      
       </ul> 
      </div> 
      <div class="ui-block-b"> 
       other content, which apear at tje left of the grid on large screens, and at the bottom on small screens 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

#custom-listview { 
    margin: 0 !important; 
}