Question

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

我想要：

但是它是：

我的代码：

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

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

Answer 1

您可以从[HttpPost] [ValidateAntiForgeryToken] public async Task<IActionResult> Create(SellsViewModel sellsViewModel) { List<Product> tableProducts=new List<Product>(); foreach(Guid item in sellsViewModel.selectedProducts) { tableProducts.Add(_context.Products.FirstOrDefault(p => p.Id == item)); } var sell = new Sell(); sell = sellsViewModel.sell; sell.Id = Guid.NewGuid(); sell.Products = tableProducts; _context.Add(sell); await _context.SaveChangesAsync(); //Redirect here return await Task.Run<ActionResult>(() => { return RedirectToAction(nameof(Index)); }); }更改为<div class="container">

并为您的页面添加元<div class="container-fluid">。

viewport

这里是容器流体的结果

如果您不想使用<head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head>，则可以在媒体查询中设置最大宽度767px，删除最大宽度值并将container-fluid类的边距设置为0

在移动视图上放大

1 个答案: