手机上的Bootstrap Grid

Question

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> 

Answer 1

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">

Answer 2

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