在移动视图上放大答案

【问题标题】：Enlarge on mobile view在移动视图上放大
【发布时间】：2019-08-28 16:30:25
【问题描述】：

如何在移动视图上放置表格？

我想要：

但它是这样的：

我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h2>Text:</h2>
  <table class="table table-bordered table-dark">
    <tbody>
      <tr>
        <td>Name</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text text text text text</td>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </tbody>
  </table>
  <a href="" class="btn btn-danger float-left">Select</a><a href="" class="btn btn-success float-right">Go Ahead</a>
</div>

如何在移动视图上放置表格？上述代码的结果无法正常阅读，我们必须放大它！

【问题讨论】：

标签： css html-table bootstrap-4

【解决方案1】：

您可以从<div class="container"> 更改为<div class="container-fluid">

并为您的页面添加元viewport。

<head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

这是容器流体的结果

如果您不想使用container-fluid，可以在媒体查询中设置最大宽度767px，删除最大宽度值并将container类的边距设置为0

【讨论】：

在container-fluid 中，宽度变满了，很好。但是尺寸并没有增加。查看我的所需图片！