简体   繁体   中英

Bootstrap Grid on mobile

Grid sistem doesn`t work on mobile: .col-xs-3 is on full screen, col-xs-3 works like col-xs-12, any ideias?

 <div class="container"> <div class="row"> <div class="col-md-1 col-xs-3"> <a href="#"> <img src="/.." /> </a> </div> <div class="col-md-1 col-xs-3"> <a href="#"> <img src="/.." /> </a> </div> <div class="col-md-1 col-xs-3"> <a href="#"> <img src="/.." /> </a> </div> ... </div> </div> 

1) If the bootstrap version your are using is 4, In bootstrap 4 there is no xs breakpoint. Instead the xs breakpoint is the default and for other breakpoints you must use breakpoints. so for example if you want 3 on mobile and 1 on md and above you must say

col-3 col-md-1

2) Please do check that the required meta tags is on the head section of your code ie

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

您确定引导程序已链接并且您在移动设备上使用chrome吗?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM