教育部資訊志工計畫網站 - 范玟瑄

網站

教育部資訊志工計畫網站

姓名

范玟瑄

日期

2017-10-11

解析度

768 * 1024

作業系統版本

iOS 11.0 (15A372)

瀏覽器版本

Chrome:版本 61.0.3163.100 (正式版本) (64 位元)
Safari:版本 11.0

有跑版(影響閱讀)問題

圖1

圖2

圖1

圖2

圖1

圖2

有出現亂碼

有壞掉的連結

有不能用的外掛程式

圖1

圖2

有不能運作的網頁元素(如按鈕不能按、選單不能選等)

圖1

圖2

其他(無法判斷屬於以上那個分類的都放在這邊)

圖1

圖2

對此網站建議(給個建議吧)

☆☆☆☆☆

可能原因:

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>

補充:修改後的版面如下