我为要旋转的 img
创建了一个类 row2
。
当可见性为 xs
和 sm
时,我想旋转三个 img
元素。
现在我的问题是,当最大可见性为 visible-xs
和 visible-sm
时,如何旋转 img
而无需旋转visible-md
和 visible-lg
?
<div class="row2">
<div class="visible-lg col-lg-3" id="particulier">
</div>
<div class="col-xs-12 col-md-4 col-lg-2" id="particulier">
<a href="http://www.egcomputerspecialisten.nl/page/176"><img alt="" src="particulier.jpg" class="img-responsive center-block" /></a>
</div>
<div class="col-xs-12 col-md-4 col-lg-2" id="webshop">
<a href="http://shop.egcomputerspecialisten.nl/?pk_campaign=egcs.nl&pk_kwd=menu_link "><img alt="" src="webshop.jpg" class="img-responsive center-block" /></a>
</div>
<div class="col-xs-12 col-md-4 col-lg-2" id="zakelijk">
<a href="http://www.egcomputerspecialisten.nl/news/8"><img alt="" src="zakelijk.png" class="img-responsive center-block" /></a>
</div>
<div class="visible-lg col-lg-3" id="particulier">
</div>
</div>
风格:
.row2 {
-ms-transform: rotate(-0.5deg); /* IE 9 */
-webkit-transform: rotate(-0.5deg); /* Chrome, Safari, Opera */
transform: rotate(-0.5deg);
}
希望大家能帮帮我。
最佳答案
为了更正@Panto,bootstrap 有以下断点 default
/* xs */
@media (max-width: 767px) {}
/* sm */
@media (min-width: 768px) and (max-width: 991px) {}
/* md */
@media (min-width: 992px) and (max-width: 1199px) {}
/* lg */
@media (min-width: 1200px) {}
所以@Twan 在你的情况下你必须在里面写类
@media (max-width: 991px) {} /* this covers xs and sm */
关于您的代码的更多注释。 无需将 visible-lg 与 col-lg-X 类一起使用。
关于html - 如何在 visible-xs 和 visible-sm bootstrap 中旋转 img,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30218166/