大佬教程收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap 3响应多个断点,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
问题:
>图像缩放仅在一行中有两个或更少时出现(它也应该与3-4个图像一起使用)
>我的断线或响应性导致不同的图像大小.我需要确保断开后的最大img大小与最大大小相同,当一行有4个时.分成两个或一个图像的示例最初看起来比最大尺寸大得多,连续4个.
我希望有人可以帮助我,我是一个初学者来构建响应的东西..
最好的祝福
http://jsfiddle.net/6dckB/(您的浏览器必须宽视图才能看到效果)
HTML:
<div class="container"> <ul class="row-fluid"> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> <li class="group"> <div class="img-thumbnail"> <a href="#"> <img src="http://placehold.it/350x150" style="width:100%;"> </a> </div> </li> </ul> </div>
CSS:
.row-fluid { padding-left: 0; list-style: none; } .row-fluid:before,.row-fluid:after { content: " "; /* 1 */ display: table; /* 2 */ } .row-fluid:after { clear: both; } .row-fluid:before,.row-fluid:after { content: " "; /* 1 */ display: table; /* 2 */ } .row-fluid:after { clear: both; } @media (min-width: 768pX) { .row-fluid { margin-left: -10px; margin-right: -10px; } } .row-fluid .row { margin-left: -10px; margin-right: -10px; } .row-fluid .group { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; width: 50%; margin-bottom: 20px; } @media (max-width: 400pX) { .row-fluid .group { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; width: 100%; } } @media (min-width: 768pX) and (max-width: 991pX) { .row-fluid .group { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; width: 33.33333333333333%; } } @media (min-width: 992pX) { .row-fluid .group { position: relative; min-height: 1px; padding-left: 10px; padding-right: 10px; float: left; width: 25%; } }
你可以通过让3中的响应功能为你工作来简化一切. BS3现在有3种网格尺寸 – 微小,小和大,用于操纵不同设备/宽度的显示.你可以这样做..
<div class="row"> <div class="col-lg-3 col-sm-4 col-6"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> </div> <div class="col-lg-3 col-sm-4 col-6"> <a href="#" class="thumbnail"> <img src="http://placehold.it/350x150" class="img-responsive"> </a> </div> ... </div>
那会得到你..
大屏幕每行> 4(col-lg-3)
平板电脑每排> 3(col-sm-4)
>“小”手机每排> 2(col-6)
以上是大佬教程为你收集整理的twitter-bootstrap – Bootstrap 3响应多个断点全部内容,希望文章能够帮你解决twitter-bootstrap – Bootstrap 3响应多个断点所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。