bootstrap-4 - 助推器 4;不能在全宽上放置 4 个简单的列
问题描述
在大屏幕上,我需要在全宽上显示 4 个固定宽度的表格,在小屏幕(移动设备)上显示在彼此下方。使用下面的代码,我什至不能让它在全宽上工作(当有足够的空间时,第 4 列不适合屏幕)。这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu+Mono">
</head>
<body>
<div style="margin-top: 70px;" class="container">
<div class="row">
<div class="col-md-3">
<table style="width: 100px">
<tr>Table 1</tr>
</table>
</div>
<div class="col-md-3">
<table style="width: 100px">
<tr>Table 2</tr>
</table>
</div>
<div class="col-md-3">
<table style="width: 100px">
<tr>Table 3</tr>
</table>
</div>
<div class="col-md-3">
<table style="width: 100px">
<tr>Table 4</tr>
</table>
</div>
</div>
</div>
</body>
</html>
解决方案
推荐阅读
- vim - vim:如何移动窗口既不使用 ctrl+w+ 也不更改默认键设置
- cordova - Ionic http 从具有 CORS 设置的非 ssl 网站获取
- node.js - 使用(反应)node.js 的 Azure 管道和使用并发脚本的表达项目
- angular - 使用事件发射器测试可点击的 Angular 指令 - @Output() 不会引发/触发
- node.js - Discord.js 欢迎信息不显示头像
- angular - 如何将角度绑定@input与html元素值绑定
- html - 我不想更改 Bootstrap 汉堡包默认图标
- c# - EF Core 添加实体而不将其持久保存在数据库中
- arduino - 将 ESP8266 (NodeMCU) 与 Android 应用程序(MIT APP 发明者)连接,尤其是来自 gps 模块的经度和纬度
- python-3.x - 在 Odoo 中上传期间如何获取文件的本地绝对路径?