可能原因:
Bootstrap grid system 與 table 交互時 壞掉
table 樣式大小寫死
原始程式:
<div class="row page-row">
<article class="welcome col-md-8 col-sm-7">
<table align="center" width="90%" border="1">
<tbody>
<tr>
<td colspan="2">
<center>
<embed pluginspage="https://www.macromedia.com/go/getflashplayer" src="./logo/logoflash.swf" type="application/x-shockwave-flash"
height="360" width="500" wmode="transparent" quality="high">
</center>
</td>
</tr>
<tr>
<td width="50%">
<center>
<b>「打造、數位、幸福」</b>
</center>
<br> 打造數位幸福,是教育部資訊志工不變的核心理念,因此將打造的手、數位的e與幸福的心結合,最後再加入志工"人"的角色於其中,讓每個志工都能以愛心,用手去實踐、環抱,幫助更多的人。
</td>
<td align="center" rowspan="2" width="50%">
<b>資訊志工識別關東旗</b>
<br>
<img src="./logo/flag.jpg" height="500">
</td>
</tr>
<tr>
<td align="center">
<img src="./logo/logo2.jpg" height="250">
<br>
<br>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<b>資訊志工識別衣服</b>
<br>
<img src="./logo/tshort.jpg" height="300">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<b>志工特質設計組合</b>
<br>
<img src="./logo/logo3.jpg" height="250">
</td>
</tr>
<tr>
<td align="center">
<b>熱情</b>
<br>
<img src="./logo/logo4.jpg" height="200">
</td>
<td align="center">
<b>關懷</b>
<br>
<img src="./logo/logo5.jpg" height="200">
</td>
</tr>
<tr>
<td align="center">
<b>服務</b>
<br>
<img src="./logo/logo6.jpg" height="200">
</td>
<td align="center">
<b>責任</b>
<br>
<img src="./logo/logo7.jpg" height="200">
</td>
</tr>
</tbody>
</table>
</article>
<!--//page-content-->
<aside class="page-sidebar col-md-3 col-md-offset-1 col-sm-4 col-sm-offset-1">
<section class="widget has-divider">
<h3 class="title">最新訊息</h3>
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1699">《開放報名》106學年度教育部資訊志工培訓研習營</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1698">《轉知》臺北市政府免費數位課程課後數位志工駐點服務</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">09月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1697">《申請》106年度教育業務志願服務獎勵實施計畫開始申請囉</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1686">《招募簡章》106學年度資訊志工計畫</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1691">《成績公告》105學年度教育部資訊志工競賽得獎名單</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1692">《核定》106學年度第1、2、3梯次資訊志工計畫核定公文</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">06月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1696">《選拔與表揚》中華民國第一屆「十大志工家庭楷模」選拔與表揚</a>
</h4>
</div>
</article>
<!--//news-item-->
</section>
<!--//widget-->
</aside>
</div>
建議修改:
<div class="row page-row">
<article class="welcome col-md-8 col-sm-12">
<table class="table" align="center" border="1">
<tbody>
<tr>
<td colspan="2">
<center>
<embed pluginspage="https://www.macromedia.com/go/getflashplayer" src="./logo/logoflash.swf" type="application/x-shockwave-flash"
height="360" width="500" wmode="transparent" quality="high">
</center>
</td>
</tr>
<tr>
<td width="50%">
<center>
<b>「打造、數位、幸福」</b>
</center>
<br> 打造數位幸福,是教育部資訊志工不變的核心理念,因此將打造的手、數位的e與幸福的心結合,最後再加入志工"人"的角色於其中,讓每個志工都能以愛心,用手去實踐、環抱,幫助更多的人。
</td>
<td align="center" rowspan="2" width="50%">
<b>資訊志工識別關東旗</b>
<br>
<img src="./logo/flag.jpg" height="500">
</td>
</tr>
<tr>
<td align="center">
<img src="./logo/logo2.jpg" height="250">
<br>
<br>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<b>資訊志工識別衣服</b>
<br>
<img src="./logo/tshort.jpg" height="300">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<b>志工特質設計組合</b>
<br>
<img src="./logo/logo3.jpg" height="250">
</td>
</tr>
<tr>
<td align="center">
<b>熱情</b>
<br>
<img src="./logo/logo4.jpg" height="200">
</td>
<td align="center">
<b>關懷</b>
<br>
<img src="./logo/logo5.jpg" height="200">
</td>
</tr>
<tr>
<td align="center">
<b>服務</b>
<br>
<img src="./logo/logo6.jpg" height="200">
</td>
<td align="center">
<b>責任</b>
<br>
<img src="./logo/logo7.jpg" height="200">
</td>
</tr>
</tbody>
</table>
</article>
<!--//page-content-->
<aside class="page-sidebar col-md-3 col-md-offset-1 col-sm-12">
<section class="widget has-divider" style="padding:12px;">
<h3 class="title">最新訊息</h3>
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1699">《開放報名》106學年度教育部資訊志工培訓研習營</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1698">《轉知》臺北市政府免費數位課程課後數位志工駐點服務</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">09月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1697">《申請》106年度教育業務志願服務獎勵實施計畫開始申請囉</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1686">《招募簡章》106學年度資訊志工計畫</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1691">《成績公告》105學年度教育部資訊志工競賽得獎名單</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1692">《核定》106學年度第1、2、3梯次資訊志工計畫核定公文</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">06月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1696">《選拔與表揚》中華民國第一屆「十大志工家庭楷模」選拔與表揚</a>
</h4>
</div>
</article>
<!--//news-item-->
</section>
<!--//widget-->
</aside>
</div>
補充:修改後的版面如下
可能原因:
Bootstrap grid system 與 table 交互時 壞掉
table 樣式大小寫死
原始程式:
<div class="row page-row">
<article class="welcome col-md-8 col-sm-7">
<table width="600" border="1" align="center">
<tbody>
<tr>
<td align="center" valign="middle">
<p>
<strong>97年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/97年slogan.gif" width="304" height="232">
<br>
<a href="./slogan/97年slogan.gif" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>98年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/98年slogan.gif" width="465" height="102">
<br>
<a href="./slogan/98年slogan.gif" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>99年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/99年slogan.gif" width="470" height="110">
<br>
<a href="./slogan/99年slogan.gif" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>100年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/100年-slogan.gif" width="517" height="136">
<br>
<a href="./slogan/100年-slogan.gif" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>101年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/101年-slogan.png" width="447" height="145">
<br>
<a href="./slogan/101年-slogan.png" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>102年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/102年-slogan.jpg" width="480" height="104">
<br>
<a href="./slogan/102年-slogan.jpg" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>103年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/103年-slogan.jpg" width="450" height="107">
<br>
<a href="./slogan/103年-slogan.jpg" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>104年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/104年-slogan.png" width="450" height="127">
<br>
<a href="./slogan/104年-slogan.png" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>105年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/105年-slogan.png" width="" height="75">
<br>
<a href="./slogan/105年-slogan.png" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>106年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/106年-slogan.png" width="" height="75">
<br>
<a href="./slogan/106年-slogan.png" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
</tbody>
</table>
</article>
<!--//page-content-->
<aside class="page-sidebar col-md-3 col-md-offset-1 col-sm-4 col-sm-offset-1">
<section class="widget has-divider">
<h3 class="title">最新訊息</h3>
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1699">《開放報名》106學年度教育部資訊志工培訓研習營</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1698">《轉知》臺北市政府免費數位課程課後數位志工駐點服務</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">09月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1697">《申請》106年度教育業務志願服務獎勵實施計畫開始申請囉</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1686">《招募簡章》106學年度資訊志工計畫</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1691">《成績公告》105學年度教育部資訊志工競賽得獎名單</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1692">《核定》106學年度第1、2、3梯次資訊志工計畫核定公文</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">06月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1696">《選拔與表揚》中華民國第一屆「十大志工家庭楷模」選拔與表揚</a>
</h4>
</div>
</article>
<!--//news-item-->
</section>
<!--//widget-->
</aside>
</div>
建議修改:
<div class="row page-row">
<article class="welcome col-md-8 col-sm-12">
<table style="width:100%;" border="1" align="center">
<tbody>
<tr>
<td align="center" valign="middle">
<p>
<strong>97年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/97年slogan.gif" style="width:100%;max-width:304px;">
<br>
<a href="./slogan/97年slogan.gif" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>98年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/98年slogan.gif" style="width:100%;max-width:465px;">
<br>
<a href="./slogan/98年slogan.gif" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>99年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/99年slogan.gif" style="width:100%;max-width:470px;">
<br>
<a href="./slogan/99年slogan.gif" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>100年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/100年-slogan.gif" style="width:100%;max-width:517px;">
<br>
<a href="./slogan/100年-slogan.gif" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>101年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/101年-slogan.png" style="width:100%;max-width:447px;">
<br>
<a href="./slogan/101年-slogan.png" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>102年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/102年-slogan.jpg" style="width:100%;max-width:480px;">
<br>
<a href="./slogan/102年-slogan.jpg" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>103年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/103年-slogan.jpg" style="width:100%;max-width:450px;">
<br>
<a href="./slogan/103年-slogan.jpg" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>104年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/104年-slogan.png" style="width:100%;max-width:450px;">
<br>
<a href="./slogan/104年-slogan.png" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>105年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/105年-slogan.png" style="width:100%;">
<br>
<a href="./slogan/105年-slogan.png" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
<tr>
<td align="center" valign="middle">
<p>
<strong>106年度教育部資訊志工slogan</strong>
</p>
<p>
<strong>
<img src="slogan/106年-slogan.png" style="width:100%;">
<br>
<a href="./slogan/106年-slogan.png" target="_blank">[下載圖檔]</a>
</strong>
</p>
</td>
</tr>
</tbody>
</table>
</article>
<!--//page-content-->
<aside class="page-sidebar col-md-3 col-md-offset-1 col-sm-12">
<section class="widget has-divider">
<h3 class="title">最新訊息</h3>
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1699">《開放報名》106學年度教育部資訊志工培訓研習營</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1698">《轉知》臺北市政府免費數位課程課後數位志工駐點服務</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">09月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1697">《申請》106年度教育業務志願服務獎勵實施計畫開始申請囉</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1686">《招募簡章》106學年度資訊志工計畫</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1691">《成績公告》105學年度教育部資訊志工競賽得獎名單</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1692">《核定》106學年度第1、2、3梯次資訊志工計畫核定公文</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">06月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1696">《選拔與表揚》中華民國第一屆「十大志工家庭楷模」選拔與表揚</a>
</h4>
</div>
</article>
<!--//news-item-->
</section>
<!--//widget-->
</aside>
</div>
補充:修改後的版面如下
可能原因:
Bootstrap grid system 與 table 交互時 壞掉
table 樣式大小寫死
原始程式:
<div class="row">
<article class="contact-form col-md-8 col-sm-7 page-row">
<h3>各年度教育部資訊志工團隊計畫 【 競賽成果專刊與服務成果網站 】</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>105年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/105Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/105header.jpg" alt="105年度服務成果網站" height="56"
width="306">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>104年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/104Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/104header.jpg" alt="104年度服務成果網站" height="56"
width="306">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>103年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/103Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/103header.jpg" alt="103年度服務成果網站" height="56"
width="306">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>102年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/102Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/102header.jpg" alt="102年度服務成果網站">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>101年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/101Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/101header.jpg" alt="101年度服務成果網站">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>100年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/100Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/100header.jpg" alt="100年度服務成果網站">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>99年度電子書版成果專刊
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/ecare/ebook/99/" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/99header.gif" alt="99年度電子書版成果專刊">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>
<div align="center">
<h3>
<strong>98年度電子書版成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/98award/" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/98header-1.gif" alt="98年度電子書版成果網站">
</a>
</strong>
</h3>
</div>
</td>
<td>
<div align="center">
<h3>
<strong>98年度競賽成果專刊
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/ecare/ebook/98/" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/98header-2.gif" alt="98年度競賽成果專刊">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>97年度競賽成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/97award/" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/97header.gif" alt="97年度競賽成果網站">
</a>
</strong>
</h3>
</div>
</td>
</tr>
</tbody>
</table>
</article>
<!--//contact-form-->
<aside class="page-sidebar col-md-3 col-md-offset-1 col-sm-4 col-sm-offset-1">
<section class="widget has-divider">
<h3 class="title">最新訊息</h3>
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1699">《開放報名》106學年度教育部資訊志工培訓研習營</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1698">《轉知》臺北市政府免費數位課程課後數位志工駐點服務</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">09月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1697">《申請》106年度教育業務志願服務獎勵實施計畫開始申請囉</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1686">《招募簡章》106學年度資訊志工計畫</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1691">《成績公告》105學年度教育部資訊志工競賽得獎名單</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1692">《核定》106學年度第1、2、3梯次資訊志工計畫核定公文</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">06月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1696">《選拔與表揚》中華民國第一屆「十大志工家庭楷模」選拔與表揚</a>
</h4>
</div>
</article>
<!--//news-item-->
</section>
<!--//widget-->
</aside>
</div>
建議修改:
<div class="row">
<article class="contact-form col-md-8 col-sm-12 page-row">
<h3>各年度教育部資訊志工團隊計畫 【 競賽成果專刊與服務成果網站 】</h3>
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>105年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/105Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/105header.jpg" alt="105年度服務成果網站" height="56"
width="306">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>104年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/104Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/104header.jpg" alt="104年度服務成果網站" height="56"
width="306">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>103年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/103Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/103header.jpg" alt="103年度服務成果網站" height="56"
width="306">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>102年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/102Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/102header.jpg" alt="102年度服務成果網站">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>101年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/101Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/101header.jpg" alt="101年度服務成果網站">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>100年度服務成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/100Achievement/index.php" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/100header.jpg" alt="100年度服務成果網站">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>99年度電子書版成果專刊
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/ecare/ebook/99/" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/99header.gif" alt="99年度電子書版成果專刊">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td>
<div align="center">
<h3>
<strong>98年度電子書版成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/98award/" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/98header-1.gif" alt="98年度電子書版成果網站">
</a>
</strong>
</h3>
</div>
</td>
<td>
<div align="center">
<h3>
<strong>98年度競賽成果專刊
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/ecare/ebook/98/" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/98header-2.gif" alt="98年度競賽成果專刊">
</a>
</strong>
</h3>
</div>
</td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">
<div align="center">
<h3>
<strong>97年度競賽成果網站
<br>(請點選圖示連結)</strong>
</h3>
<h3>
<strong>
<a href="https://ecare.moe.gov.tw/97award/" target="_blank">
<img src="https://ecare.moe.gov.tw/ecare/images/97header.gif" alt="97年度競賽成果網站">
</a>
</strong>
</h3>
</div>
</td>
</tr>
</tbody>
</table>
</article>
<!--//contact-form-->
<aside class="page-sidebar col-md-3 col-md-offset-1 col-sm-12">
<section class="widget has-divider">
<h3 class="title">最新訊息</h3>
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1699">《開放報名》106學年度教育部資訊志工培訓研習營</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">10月</span>
<span class="date-number">05日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1698">《轉知》臺北市政府免費數位課程課後數位志工駐點服務</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">09月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1697">《申請》106年度教育業務志願服務獎勵實施計畫開始申請囉</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1686">《招募簡章》106學年度資訊志工計畫</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1691">《成績公告》105學年度教育部資訊志工競賽得獎名單</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">08月</span>
<span class="date-number">15日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1692">《核定》106學年度第1、2、3梯次資訊志工計畫核定公文</a>
</h4>
</div>
</article>
<!--//news-item-->
<article class="news-item row">
<div class="col-md-2 col-sm-2 col-xs-2">
<p class="date-label">
<span class="month">06月</span>
<span class="date-number">20日</span>
</p>
</div>
<!--//date-label-wrapper-->
<div class="details col-md-10 col-sm-10 col-xs-10">
<h4 class="title">
<a href="news-details.php?id=1696">《選拔與表揚》中華民國第一屆「十大志工家庭楷模」選拔與表揚</a>
</h4>
</div>
</article>
<!--//news-item-->
</section>
<!--//widget-->
</aside>
</div>
補充:修改後的版面如下