css - Bootstrap:强制单元格高度延伸到剩余的屏幕上
问题描述
我想使用 bootstrap 4.0 创建一个 2 行 x 3 列布局。我还有一个导航栏,我从这个示例中排除了它,因为它不是必需的。
我希望 2 x 3 布局在不调用垂直滚动条的情况下将行的高度均匀地拉伸到整个剩余屏幕大小。目前我正在使用“高度:600px”来控制单元格的高度。我认为这个解决方案对其他设备不利。有没有办法以相对的方式实现这一点。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.my-row {
height: 600px
}
</style>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<div class="wrapper container-fluid ">
<div class="row justify-content-center align-items-stretch my-row">
<div class="col-md-4">Widget 1</div>
<div class="col-md-4">Widget 2</div>
<div class="col-md-4">Widget 3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-md-4">Widget 4</div>
<div class="col-md-4">Widget 5</div>
<div class="col-md-4">Widget 6</div>
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- java - 如何从我的 ListView 引用元素内的视图?
- homebrew - Cabal 无法解决 Idris 的依赖关系
- c++ - 独立的读-修改-写排序
- php - 如何在 wordpress 上使用 Isotope 和自定义循环和自定义设计?
- node.js - npm run build 在构建 react-native 模块(react-native-stars)时给出 Ionic React 的语法错误
- java - 从 ArrayList-Java 中删除重复的元组
- javascript - 将 ng-class 属性添加到 angularjs 指令的根元素
- php - PHP 从选择 html 页面中获取值
- c# - 不能为 oculus 任务抓取脚本统一父对象
- ios - 为什么在展示我的自定义 UIAlert 时会收到 Nil Layout Anchor 警告?