jquery mobile的响应式表格

当屏幕宽度变小时，我必须将3个表格放置在彼此的下方。通常我会在每张桌子的周围容器上使用float: left;，但这不起作用。它会打破我的jQuery的移动布局。jquery mobile的响应式表格

我以为我会做一个小grid layout然后，但这崩溃了我的表，而不是将它们放置在彼此之下。

当屏幕宽度减少时，如何在不使用浮动的情况下将3个表格放置在彼此的下方，并且不会破坏jQuery移动版面？

这里是我的页面布局的样本：

<body class="container"> 
    <div data-role="page" data-theme="a"> 
     <div data-role="header" data-position="inline"> 
      <h1>Title</h1> 
     </div> 
     <div data-role="content" data-theme="a"> 
      <div data-demo-html="true">   
       <div data-role="collapsible-set" data-theme="a" data-content-theme="d" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"> 
        <div data-role="collapsible" data-collapsed="false"> 
        </div> 
        <div data-role="collapsible"> 
         <h3>Title</h3> 
         <div class="ui-grid-b"> 
          <div class="ui-block-a"> 
           <form class="form-search"> 
            <div class="content"> 
             <h3>Title</h3> 
             <table class="center alfabet"> 
              <tr> 
               <td>Blabla</td> 
               <td>Blabla</td> 
               <td>Blabla</td> 
               <td></td> 
              </tr> 
             </table> 
            </div> 
           </form> 
          </div> 
          <div class="ui-block-b"> 
           <form class="form-search"> 
            <div class="content"> 
             <table class="center alfabet"> 
              <tr> 
               <td>Blabla</td> 
               <td>Blabla</td> 
               <td>Blabla</td> 
               <td></td> 
              </tr> 
             </table> 
            </div> 
           </form> 
          </div> 
          <div class="ui-block-c"> 
           <form class="form-search"> 
            <div class="content"> 
             <table class="center alfabet"> 
              <tr> 
               <td>Blabla</td> 
               <td>Blabla</td> 
               <td>Blabla</td> 
               <td></td> 
              </tr> 
             </table> 
            </div> 
           </form> 
          </div> 
         </div> 
        </div> 
       </div> 
       <div data-role="collapsible">     
       </div> 
      </div> 
     </div> 
    </div> 
</body>

来源

2013-11-01 Forza

与Bootstrap Fluid Grid system

.row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";line-height:0;} 
.row-fluid:after{clear:both;} 
.row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.127659574468085%;*margin-left:2.074468085106383%;} 
.row-fluid [class*="span"]:first-child{margin-left:0;} 
.row-fluid .span4{width:31.914893617021278%;*width:31.861702127659576%;} 


<div class="row-fluid"> 
    <div class="span4"> 
      Table 1 here 
    </div> 
    <div class="span4"> 
      Table 2 here 
    </div> 
    <div class="span4"> 
      Table 3 here 
    </div> 
</div>

解决它

来源

2013-11-01 13:19:24 Forza

jquery mobile的响应式表格

回答

相关问题