Bootstrap 4隐藏和显示网格

最后发布: 2019-01-11 21:52:17


问题

目的是隐藏移动设备上的红色列,并以更高的分辨率显示它,但它不会隐藏。 有人可以告诉我我的代码有什么问题吗?我将它粘贴到小提琴中并且可以完美地工作,但是我将其应用于我的项目却无法正常工作...我在做什么错? 我正在使用Bootstrap 4.2.1

小提琴

<html>
    <head>
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="d-none d-md-block col-md-8" style="background-color: red; height: 100vh">

                </div>
                <div class="col-12 col-md-4" style="background-color: black; height: 100vh">

                </div>
            </div>
        </div>
    </body>
</html>

Chrome测试 (也在真实手机上证明了相同的结果)

镀铬测试

浏览器显示什么

html jsp bootstrap-4
回答

只需添加

<meta name="viewport" content="width=device-width, initial-scale=1.0">

进入你的<head>

视口元素向浏览器提供有关如何控制页面尺寸和缩放比例的说明。 width = device-width部分将页面的宽度设置为跟随设备的屏幕宽度(视设备而定)。 initial-scale = 1.0部分设置浏览器首次加载页面时的初始缩放级别。 (来源w3schools


回答

试试这个代码

  <div className="row">
      <div className="col-md-12 bg-danger d-none d-lg-block"  style="height: 100vh">
      </div>
      <div className="col-12 col-md-12 bg-success d-lg-none"  style="height: 100vh">
      </div>
  </div>