移动端上的Bootstrap Grid

Question

网格系统不能在移动设备上工作：.col-xs-3是全屏的，col xs-3像col xs-12一样工作，有什么想法吗？

​

<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)如果您使用的bootstrap版本是4，那么在bootstrap 4中没有xs断点。相反，xs断点是默认断点，对于其他断点，您必须使用断点。例如，如果你想在移动端使用3，在md及更高版本上使用1，你必须说

col-3 col-md-1

2)请检查所需的meta标记是否位于代码的开头部分，即

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

Answer 2

您确定bootstrap是链接的，并且您在移动设备上使用的是chrome吗？