我正在試驗最近發佈的MDL工具包,並嘗試使用卡片和表格的網格佈局。使用表格材料設計Lite網格
我發現MDL網格不如嵌套列的Bootstrap網格那麼靈活(可能因爲我對此還不夠了解)。所以在我的3列布局中,我並排使用卡片和表格來呈現我擁有的數據。
但不幸的是,卡不跨越列的整個寬度,除非我手動應用寬度= 100%。但是一旦我做到了,桌子就不會響應,並且在屏幕尺寸縮小時與桌面上的卡片重疊。
誰能告訴我如何擺脫這個問題。
<body>
<main class="mdl-layout__content">
<div class="page-content">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--4-col ">
<div class="mdl-card mdl-shadow--4dp demo-card-wide">
<div class="mdl-card__media">
<img src="http://www.gaynz.com/articles/uploads/2/Auckland-at-night.jpg" width="173" height="157" border="0" alt="" style="padding:10px;">
</div>
<div class="mdl-card__supporting-text">Auckland Sky Tower, taken March 24th, 2014</div>
<div class="mdl-card__supporting-text">The Sky Tower is an observation and telecommunications tower located in Auckland, New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure in the Southern Hemisphere.</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp mdl-cell--4-col" style=" width: 100%">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Material</th>
<th>Quantity</th>
<th>Unit price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>
<td>25</td>
<td>$2.90</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>
<td>50</td>
<td>$1.25</td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">Laminate (Gold on Blue)</td>
<td>10</td>
<td>$2.35</td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Welcome</h2>
</div>
<div class="mdl-card__supporting-text">
<div class="demo-grid-1 mdl-grid">
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">this is a text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">another text</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">30/05/2015</div>
<div class="mdl-cell mdl-cell--3-col mdl-cell--2-col-tablet mdl-cell--1-col-phone small-cell">3999.34</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
這似乎是表是不是真的響應所有,使用從[例如其網站](http://codepen.io/anon/pen/EjLraY)它根本沒有響應寬度變化。此外,請僅提供您的問題的示例代碼,而不是任何周圍的代碼(如導航欄和東西),以及從HTML分離CSS(更清楚您所應用的樣式),如[so](https ://jsfiddle.net/x9gj73y7/2/)。恐怕我不知道是否有修復。 – jdepypere
@jdepypere抱歉所有非必要的東西。我清理了一下。 – Ish
@jdepypere對於沒有響應的表是正確的。沒有關於這方面的材料設計指南,不管用戶體驗指導如何,這都是一種痛苦。你可以使用表格本身的單元格寬度來改變它的寬度,但這是它的範圍(並且它可能會導致一些對齊故障,然後需要處理。) – Garbee