时间戳

首页 > 解决方案 > 引导表越过智能手机的屏幕边缘

html - 引导表越过智能手机的屏幕边缘

问题描述

我正在使用引导程序（https://getbootstrap.com/）制作我的第一个 laravel 项目，但遇到了移动设备的问题。

我正在使用 bootstrap4 基本表（不使用responsive属性不是问题）并且使用small属性也无济于事。

网站加载后，如图1所示。现在要查看整个表格，我需要向左滑动，如图2或缩小，如图3所示。

我可以在加载时强制我的网站缩小，如图3所示吗？或者使表格适合图 1中的页面，因为我NAV不会缩放？我需要整个表格立即可见，即使不可读并且用户会自己缩放它。

我试着只把桌子包进去<div class="container"></div>，.container-fluid但都没有帮助。

任何人都可以帮助我吗？

谢谢你。

链接到图片

代码：

<div class="container">
      <h1>List</h1>
      <div class="row">
            <div class="dropdown">
                  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {{ request('aec') ? $aecs->find(request('aec'))->name : '' }}
                  </a>
                  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a class="dropdown-item" href="{{ route('ae.index') }}">Všetky</a>
                        @foreach ($aecs as $aec)
                        <a class="dropdown-item" href="{{ route('ae.index', ['aec' => $aec]) }}">{{ $aec->name }}</a>
                        @endforeach
                  </div>
            </div>
      </div>
</div>
<br>
<div class="container">
      <table class="table table-hover">
            <thead>
                  <tr>
                        <th scope="col" class="text-center align-middle">ID</th>
                        <th scope="col" class="text-center align-middle">Typ</th>
                        <th scope="col" class="text-center align-middle">Názov</th>
                        <th scope="col" class="text-center align-middle">Skratka</th>
                        <th scope="col" class="text-center align-middle">Pseudo ID</th>
                        <th scope="col" class="text-center align-middle">Fotografia</th>
                  </tr>
            </thead>
            <tbody>
                  @forelse ($aes as $ae)
                  <tr>
                        <th scope="row" class="text-center align-middle">
                              <a href="{{ $ae->path() }}">
                                    {{ $ae->AECategory->id . "." . $ae->id }}
                              </a>
                        </th>
                        <td class="text-center align-middle">{{ $ae->AECategory->name }}</td>
                        <td class="text-center align-middle"><a href="{{ $ae->path() }}">{{ $ae->name }}</a></td>
                        <td class="text-center align-middle">{{ $ae ->nickname }}</td>
                        <td class="text-center align-middle">{{ $ae->pseudo_id }}</td>
                        <td class="text-center align-middle">
                              <div class="gallery">
                                    <a data-fancybox="gallery"
                                          href="{{ $ae->image ? asset($ae->image->path) : '' }}">
                                          <img
                                          src="{{ $ae->image ? asset($ae->image->path025) : '' }}"
                                          class="img-fluid img"
                                          width="250"
                                          height="250"
                                          alt=""
                                          >
                                    </a>
                              </div>
                        </td>
                  </tr>
                  @empty

                  @endforelse
            </tbody>
      </table>
</div>

标签： htmlcsstwitter-bootstrap

解决方案

尝试带有属性的viewport meta标签。initial-scale给初始比例缩放值0.5。页面将使用 initial-scale 属性中给定的值进行缩放。请注意，这仅适用于页面的初始加载。

<meta name="viewport" content="width=device-width, initial-scale=.5" />

此页面还将为您提供有关页面缩放的更多见解。

推荐阅读