源代碼如下
<div class="container-fluid">
<div>
<div id="main" style="width: 500px;height:550px;float:left;"></div>
<div id="main2" style="width: 600px;height:550px;float:left;"></div>
<div id="main3" style="width: 550px;height:550px;float:left;"></div>
<div id="main4" style="width: 550px;height:550px;float:left;"></div>
</div>
</div>
在電腦上效果不錯， 但是在手機網頁打開，圖就只有半邊圖了，因為圖沒有完全顯示，有一個左右滾動條也好，但是左右滾動條也沒有，效果如下
求救各位大神 ，如何用bootstrap 可以在移動端 完全顯示，能自動縮放自然最好，如果不能做到 ，有一個左右滾動條也是極好的。非常感謝。
uj5u.com熱心網友回復：
求救各位大神 ，如何用bootstrap 可以在移動端 完全顯示，能自動縮放自然最好，如果不能做到 ，有一個左右滾動條也是極好的。非常感謝。uj5u.com熱心網友回復：
col-XX-1 類似這樣的設定，寫一個大解析度的，再寫一個小解析度的試試uj5u.com熱心網友回復：
https://v3.bootcss.com/css/ 看里面的 “實體：移動設備和桌面螢屏”，希望有幫助uj5u.com熱心網友回復：
你這個圖是什么控制元件，不同控制元件，對自適應的效果是不同的。uj5u.com熱心網友回復：
要適應pc橫屏和手機豎屏，這不是簡單的事情，包括很多專業的前端框架，都不能做到完美。不過我還建議采用bootsramp之類的自適應前端框架來做，不要試圖完全自己寫樣式控制。
自己寫，累死也做不好，何必呢！
uj5u.com熱心網友回復：
這個也很考驗界面設計能力哦，在對業務理解的基礎上，把界面合理切分成不同的部分，
并采用合理的布局來保證不同螢屏狀態下的自適應效果，
是需要很多的思考和經驗的
uj5u.com熱心網友回復：
你說的，正是我想要的方案，問題是 我寫不出來呀，請幫忙改一下以下代碼，非常感謝
<div class="container-fluid">
<div>
<div id="main" style="width: 500px;height:550px;float:left;"></div>
<div id="main2" style="width: 600px;height:550px;float:left;"></div>
<div id="main3" style="width: 550px;height:550px;float:left;"></div>
<div id="main4" style="width: 550px;height:550px;float:left;"></div>
</div>
</div>
uj5u.com熱心網友回復：
@mediauj5u.com熱心網友回復：
通過判斷設備的型別，寬度可以設定不同的樣式
uj5u.com熱心網友回復：
你應該首先學習一下 bootstrap。看你的代碼，你并沒有學過 bootstrap 啊？
使用bootstrap 柵格布局，至少會看到 container、xs-xxxxx、md-xxxxx 這種 class 的！
uj5u.com熱心網友回復：
你這根本不是bootstrap，bootstrap是自帶螢屏自適應的，bootstrap吧螢屏分成12格，對應螢屏中的大小，class="col-md-1 col-xs-12 "類似于這樣的，其中md xs對應關系為
col-lg一般用于大屏設備，(min-width:1200px);
col-md一般用于中屏設備，(min-width：992px);
col-sm一般用于小屏設備，(min-width：768px);
col-xs用于超小型設備，(max-width：768px);
uj5u.com熱心網友回復：
了解下bootstrap的柵格,你寫死像素還適應個毛uj5u.com熱心網友回復：
除了一個外層的div應該用的是bootstop，里層的都是h4。。。uj5u.com熱心網友回復：
你可以先去w3cschool去學學bootstrapuj5u.com熱心網友回復：
我改成如下代碼
<div class="row">
<div id="main" class="col-xs-6 col-sm-3"></div>
<div id="main2" class="col-xs-6 col-sm-3"></div>
</div>
<div class="row">
<div id="main3" class="col-xs-6 col-sm-3"></div>
<div id="main4" class="col-xs-6 col-sm-3"></div>
</div>
結果沒有報錯，也沒有出來任何結果。
uj5u.com熱心網友回復：
看的出來你用的是echart，你自己看看你echart的div是不是指定寬度為px了吧。是的沒錯你里面有px的div會撐破外面div的設定。
uj5u.com熱心網友回復：
一定要指定px，我用 <div id="main" class="col-xs-6 col-sm-3"></div> 未指定，結果沒有出來任何結果。
外面的DIV 沒有指定寬度， 直接 用 <div class="row">
uj5u.com熱心網友回復：
用em代替px試試看。
uj5u.com熱心網友回復：
應該是沒有指定高度，指定高度，后柵格會顯示
還有，如果使用echart的話，記得
$(window).resize( .resize);
uj5u.com熱心網友回復：
柵格布局去那了？ 全是height widthuj5u.com熱心網友回復：
沒有height 和 width ，原始碼如下
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
uj5u.com熱心網友回復：
是echart ，但是 老師推薦的 $(window).resize( .resize) 不知道作用是什么
uj5u.com熱心網友回復：
echart之前用過一下，不過好像確實要resize，之前沒有仔細研究過，只是復制別人的，剛才查了一下:ECharts沒有系結resize事件，顯示區域大小發生改變內部并不知道，使用方可以根據自己的需求系結關心的事件，主動呼叫resize達到自適應的效果，常見如window.onresize = myChart.resize。
不知道是不是這個原因導致的，
還有關于你的
<div class="row">
<div id="main" class="col-xs-6 col-sm-3"></div>
<div id="main2" class="col-xs-6 col-sm-3"></div>
</div>
<div class="row">
<div id="main3" class="col-xs-6 col-sm-3"></div>
<div id="main4" class="col-xs-6 col-sm-3"></div>
</div>
感覺設定的有點小
uj5u.com熱心網友回復：
老師能不能幫忙改一下代碼，然后我測一下，謝謝。
uj5u.com熱心網友回復：
你用bootstrap的柵格就行了，手機上會給你自動換行<div class=row>
<div class=col-md-12>
這個就是bs上面的布局
uj5u.com熱心網友回復：
一句兩句的改了也不一定有用啊，首先要看echart是否生效了，另外要看bootstrap是否參考對了，使用柵格布局螢屏是否自適應了另外，每一個row你也要保證12格都占滿了，比如寬螢屏，你要有col-md-6，兩個表格并列顯示，然后中螢屏和小螢屏每個表格自己占全部大小
col-sm-12 col-xs-12，這個12格是指div下面分為12格
<div class="row">
<div id="main" class="col-md-6 col-sm-12 col-xs-12"></div>
<div id="main2" class="col-md-6 col-sm-12 col-xs-12"></div>
<div>
uj5u.com熱心網友回復：
bootstrap的柵欄，或者使用CSS的@media screen區判斷uj5u.com熱心網友回復：
其實不用考慮柵格，直接 float 對齊 各 50% 就可以了。
uj5u.com熱心網友回復：
并排顯示。是一個很大的問題。一排顯示一個圖比較容易實作，說什么，直接用col的，一看就是沒有用過echart的。當echart自適應的時候。COL根本就沒有用。轉載請註明出處，本文鏈接：https://www.uj5u.com/net/123678.html
標籤：ASP.NET
上一篇：關于AES解密問題，求幫助
下一篇：關于.net的知識