如何组织布局使其具有响应性？
如何组织布局使其具有响应性？
提问于 2017-01-22 23:06:06
这是我的代码
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h2 class="page-header"> Utenti online </h2>
</div>
</div>
<!-- fine row1 -->
<div class="row">
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
<b style="margin:10px;"> Marco </b>
</div>
</div>
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
<b style="margin:10px;"> Marco </b>
</div>
</div>
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
<b style="margin:10px;"> Marco </b>
</div>
</div>
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px"/>
<b style="margin:10px;"> Marco </b>
</div>
</div>
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">
<div class="useronline">
<img src="images/no-photo.png" class="img-responsive" width="150" style="border-radius:5px 5px 0 0; margin-bottom:10px">
<b style="margin:10px;"> Marco </b>
</div>
</div>
</div>
</div>这是窗口浏览器的图像(大屏幕)
现在，col lg是10，而sm是25。我的问题是:如何组织布局，使其对所有屏幕都有响应？
回答 1
Stack Overflow用户
发布于 2017-01-22 23:45:32
Bootstrap在所有屏幕上都是响应的，如果您希望在所有屏幕大小上都有一致的行为，您可以在代码中更改以下行：
更改此设置：
<div class="col-sm-5 col-lg-2 col-md-3" style="margin:10px">到这个
<div class="col-sm-2 col-lg-2 col-md-2" style="margin:10px">将使所有设备的所有div分布到两列中。
抱歉，我没有足够的分数添加为评论，因此添加为答案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41797154
复制
相似问题
如何使其具有响应性？
响应性布局-重新组织div
如何更改Bootstrap 4布局以删除空格并使其具有响应性
Jcarousel basic，使其具有响应性
如何裁剪图像并使其具有响应性？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
