Question

在bootstrap中，我试图显示堆叠在超小设备上的div和A，并在小型设备及以上显示在一行中。（就像在这个例子中一样：https://getbootstrap.com/docs/4.0/layout/grid/#stacked-to-horizontal）

但是，div不会堆叠在超小型设备上（使用Firefox ESR 52.4），但在所有设备尺寸上保持不变。

任何关于我缺少的提示都会很棒：

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">

    <title>title</title>

    <!-- Bootstrap related files -->
    <link rel="stylesheet" href="vendor/bootstrapcss/bootstrap.min.css">
    <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <script src="vendor/popper/popper.min.js"></script>
    <script src="vendor/bootstrapjs/bootstrap.min.js"></script>
    <script src="vendor/workarounds/ie10-viewport-bug-workaround.js"></script>

    <!-- Custom styles -->
    <link href="css/main.css" rel="stylesheet">
  </head>

  <body>

  <div class="container">

    <div class="row">

      <div class="col-sm-4">
        A
      </div>

      <div class="col-sm-8 hidden-xs-down"
           style="text-align:right">
        B
      </div>

    </div> <!-- /.row-->
(...)

页面上还有其他引导元素可以工作，但布局说明没有。我已经检查过所有相关的js和css文件都可用，它们都返回状态200。

Answer 1

Bootstrap网格类特定于某些屏幕尺寸，可以一起使用。（https://getbootstrap.com/docs/4.0/layout/grid/#grid-options）如果您希望行中的div在超小（xs）上堆叠，请为它们提供类col-12，以强制列在小于576px的设备上获取行的整个宽度宽。

Bootstrap视口无法识别

1 个答案: