css - 在移动 View 上放大

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

我想要：

但这是：

我的代码：

<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>

如何在移动数据视图上放置表格？
上述代码的结果无法正确读取，我们必须将其放大！

最佳答案

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

并为您的页面添加meta viewport。

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

这是容器流体的结果

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

Container

css - 在移动 View 上放大