bootstrap 2个div并排 自动适应屏幕 怎么写呢

[zhengyingcan]

源代码如下
<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 可以在移动端 完全显示，能自动缩放自然最好，如果不能做到 ，有一个左右滚动条也是极好的。非常感谢。

[以专业开发人员为伍]

引用 7 楼 zhengyingcan 的回复:

[quote=引用 5 楼 foren_whb 的回复:] 要适应pc横屏和手机竖屏，这不是简单的事情，包括很多专业的前端框架，都不能做到完美。 不过我还建议采用bootsramp之类的自适应前端框架来做，不要试图完全自己写样式控制。 自己写，累死也做不好，何必呢！

引用 5 楼 foren_whb 的回复:

要适应pc横屏和手机竖屏，这不是简单的事情，包括很多专业的前端框架，都不能做到完美。 不过我还建议采用bootsramp之类的自适应前端框架来做，不要试图完全自己写样式控制。 自己写，累死也做不好，何必呢！

你说的，正是我想要的方案，问题是 我写不出来呀，请帮忙改一下以下代码，非常感谢 <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> [/quote] 你应该首先学习一下 bootstrap。看你的代码，你并没有学过 bootstrap 啊？ 使用bootstrap 栅格布局，至少会看到 container、xs-xxxxx、md-xxxxx 这种 class 的！

[杀马特王]

你这根本不是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);

[拜一刀]

了解下bootstrap的栅格,你写死像素还适应个毛

[You冷]

除了一个外层的div应该用的是bootstop，里层的都是h4。。。

[You冷]

你可以先去w3cschool去学学bootstrap

[非专业开发Five]

看的出来你用的是echart，你自己看看你echart的div是不是指定宽度为px了吧。 是的没错你里面有px的div会撑破外面div的设置。

[zhengyingcan]

引用 11 楼 weixin_41902841 的回复:

你这根本不是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);

我改成如下代码 <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> 结果没有报错，也没有出来任何结果。

[zhengyingcan]

引用 16 楼 xomix 的回复:

看的出来你用的是echart，你自己看看你echart的div是不是指定宽度为px了吧。 是的没错你里面有px的div会撑破外面div的设置。

一定要指定px，我用 <div id="main" class="col-xs-6 col-sm-3"></div> 未指定，结果没有出来任何结果。 外面的DIV 没有指定宽度， 直接 用 <div class="row">

[非专业开发Five]

引用 17 楼 zhengyingcan 的回复:

[quote=引用 16 楼 xomix 的回复:] 看的出来你用的是echart，你自己看看你echart的div是不是指定宽度为px了吧。 是的没错你里面有px的div会撑破外面div的设置。

一定要指定px，我用 <div id="main" class="col-xs-6 col-sm-3"></div> 未指定，结果没有出来任何结果。 外面的DIV 没有指定宽度， 直接 用 <div class="row">[/quote] 用em代替px试试看。

[极客诗人]

栅格布局去那了？ 全是height width

[jiaoye6789]

引用 17 楼 zhengyingcan 的回复:

[quote=引用 16 楼 xomix 的回复:] 看的出来你用的是echart，你自己看看你echart的div是不是指定宽度为px了吧。 是的没错你里面有px的div会撑破外面div的设置。

一定要指定px，我用 <div id="main" class="col-xs-6 col-sm-3"></div> 未指定，结果没有出来任何结果。 外面的DIV 没有指定宽度， 直接 用 <div class="row">[/quote] 应该是没有指定高度，指定高度，后栅格会显示 还有，如果使用echart的话，记得 $(window).resize( .resize);

[zhengyingcan]

引用 20 楼 weixin_38925245 的回复:

栅格布局去那了？ 全是height width

没有height 和 width ，源码如下 <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div>

[zhengyingcan]

引用 19 楼 jiaoye6789 的回复:

[quote=引用 17 楼 zhengyingcan 的回复:] [quote=引用 16 楼 xomix 的回复:] 看的出来你用的是echart，你自己看看你echart的div是不是指定宽度为px了吧。 是的没错你里面有px的div会撑破外面div的设置。

一定要指定px，我用 <div id="main" class="col-xs-6 col-sm-3"></div> 未指定，结果没有出来任何结果。 外面的DIV 没有指定宽度， 直接 用 <div class="row">[/quote] 应该是没有指定高度，指定高度，后栅格会显示 还有，如果使用echart的话，记得 $(window).resize( .resize);[/quote] 是echart ，但是 老师推荐的 $(window).resize( .resize) 不知道作用是什么

[杀马特王]

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> 感觉设置的有点小

[zhengyingcan]

引用 23 楼 weixin_41902841 的回复:

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> 感觉设置的有点小

老师能不能帮忙改一下代码，然后我测一下，谢谢。

[Teln_小凯]

你用bootstrap的栅格就行了，手机上会给你自动换行 <div class=row> <div class=col-md-12> 这个就是bs上面的布局

[杀马特王]

一句两句的改了也不一定有用啊，首先要看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>

[qq_40815123]

bootstrap的栅栏，或者使用CSS的@media screen区判断

[XBodhi.]

其实不用考虑栅格，

直接 float 对齐 各 50% 就可以了。

[RuthlessAFei]

并排显示。是一个很大的问题。一排显示一个图比较容易实现，说什么，直接用col的，一看就是没有用过echart的。当echart自适应的时候。COL根本就没有用。