引导程序：col-xs-6在移动视图中以100％的宽度显示

时间：2020-10-09 20:35:35

标签： css bootstrap-4

我正在使用引导程序 我想在显示移动视图时将行分为2列 我有下面的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" ></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
   

    <title>test mobile</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-6 col-sm-8 ">col-xs-6 col-sm-8</div>
        <div class="col-xs-6 col-sm-4 ">col-xs-6 col-sm-4</div>
      </div>
      </div>
  </body>
</html>

它可以正确显示md视图，但在移动视图中，列占据整个行空间而不是宽度的一半 enter image description here

您知道会发生什么以及如何解决吗？

1 个答案:

答案 0 :(得分：3)

如果您使用的是最新版本的Bootstrap，我认为他们使用的是removed the xs class。只需使用 col-6 代替 col-xs-6 ，就可以了。

相关问题
最新问题