解决方法
解决这个问题的一个好方法是
here!
默认情况下,Bootstrap不提供允许我们创建五列布局的网格系统,但正如您所看到的那样,它非常简单.
首先,您需要以Bootstrap的方式创建默认列定义.我打电话给我的班级col -..- 15.
.col-xs-15,.col-sm-15,.col-md-15,.col-lg-15 { position: relative; min-height: 1px; padding-right: 10px; padding-left: 10px; }
接下来,您需要在不同媒体查询的情况下定义新类的宽度.
.col-xs-15 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-15 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-15 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-15 { width: 20%; float: left; } }
现在,您已准备好将类与原始Bootstrap类组合在一起.例如,如果你想创建div元素,它在中等屏幕上表现得像五列布局,而在较小的列上就像四列一样,你只需要使用这样的东西:
<div class="row"> <div class="col-md-15 col-sm-3"> ... </div> </div>
原文地址:https://www.jb51.cc/html/231632.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。