twitter-bootstrap-3 – Bootstrap 3 mixin multiple make – *
发布时间:2020-12-17 21:21:59 所属栏目:安全 来源:网络整理
导读:我正在使用特定的mixin试图让我的代码更清晰.所以不要使用: div class="col-lg-3 col-md-5 col-sm-6 col-xs-12" 我正在使用: div class="stackOverflowRocksIt" 在我的mixins.less: .stackOverflowRocksIt{ .make-lg-column(3); .make-md-column(4); .mak
我正在使用特定的mixin试图让我的代码更清晰.所以不要使用:
<div class="col-lg-3 col-md-5 col-sm-6 col-xs-12"> 我正在使用: <div class="stackOverflowRocksIt"> 在我的mixins.less: .stackOverflowRocksIt{ .make-lg-column(3); .make-md-column(4); .make-sm-column(6); .make-xs-column(12); } 它适用于XS和SM视口,但不适用于我调整大小到MD或LG(然后采用SM大小).这是为不同视口大小创建列的正确方法吗?任何的想法? 解决方法
你应该重新订购你的mixin电话:
.stackOverflowRocksIt { .make-xs-column(12); .make-sm-column(6); .make-md-column(4); .make-lg-column(3); } @ seven-phases-max是对的. Bootstrap的代码首先是移动的,这意味着当屏幕尺寸变宽时,您应该为最小的屏幕宽度和功能以及属性启动代码. Bootstrap使用CSS媒体查询来使CSS代码响应.在您的情况下.make-lg-column(3);编译成如下所示的CSS代码: @media (min-width: 1200px) { .stackOverflowRocksIt { float: left; width: 25%; } } 如果你写.make-md-column(4);在.make-lg-column(3)之后; @media(min-width:992px)将出现@media(min-width:1200px),并且对于大于1200px的屏幕也会评估为true,因此会覆盖您的大列代码. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |