2017年10月11日 21:05:49 J_小浩子 閱讀數：5736

先看效果

• PC，顯示3張圖片

• 移動端，只顯示一張

解決思路，用Bootstrap的網格系統。

• visible-md-block 表示在早中型裝置臺式電腦（≥992px）可顯示

• visible-lg-block 表示在大型裝置臺式電腦（≥1200px）可顯示

• visible-xs-block 表示在超小裝置手機（<768px）可顯示

程式碼：

 <div class="container">
    <div class="row">
        <div class="col-md-3 visible-md-block visible-lg-block">
            <a >
                <img src="images/tm-sigma-00.jpg" class="img-responsive" style="height: 518px;">    
            </a>
        </div>
        <div class="col-md-6 visible-xs-block visible-md-block visible-lg-block">
            <a >
                <img src="images/tm-sigma-00.jpg" class="img-responsive" data-preview-src="" data-preview-group="1" style="height: 518px;"> 
            </a>
        </div>
        <div class="col-md-3 visible-md-block visible-lg-block">
            <a >
                <img src="images/tm-sigma-00.jpg" class="img-responsive" style="height: 518px;">    
            </a>
        </div>
    </div>
    </div>