Bootstrap стол переходит край экрана на смартфоне

Question

Я делаю свой первый laravel проект с использованием bootstrap (https://getbootstrap.com/), и я столкнулся с проблемой с мобильными устройствами.

Я использую базовый загрузчик4 c таблица, (без использования свойства responsive это не проблема) и использование свойства small тоже не помогает.

Когда сайт загружен, он показывает как на картинка 1 . Теперь, чтобы увидеть всю таблицу, мне нужно сдвинуть влево, как на картинка 2 или уменьшить, как на картинка 3 .

Могу ли я заставить мой сайт уменьшить масштаб как показано в pi c 3 при загрузке? Или сделать таблицу вписывающейся в страницу, как на картинке 1 , так как мой NAV не будет масштабироваться? Мне нужно, чтобы вся таблица была видна сразу, даже если она не читается, и пользователь сам увеличит ее.

Я пытался обернуть только таблицу в <div class="container"></div> и .container-fluid, но ни одна из них не помогла.

Кто-нибудь может мне помочь, пожалуйста?

Спасибо.

ссылка на пи c

код:

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

Answer 1

Попробуйте тег viewport meta с атрибутом initial-scale. Дайте начальному масштабу значение 0.5 zoom. Страница будет увеличена со значением, заданным в атрибуте начального масштаба. Обратите внимание, что это применимо только к начальной загрузке страницы.

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

Эта страница также даст вам более подробные сведения об увеличении страницы.

Answer 2

оберните ваш html контейнером, я не знаю, что вы называете своими классами, так как вы не опубликовали его, что очень затрудняет помощь.

/*in css*/
    @media only screen and (min-width: 1000px){

.yourclasshere tagshere{
    width: 100% !important;
    }
}

здесь пример класса, который я назвал оболочкой, и код из css.

@media only screen and (min-width: 1000px){
    .wrapper{
        width: calc(100% - 32px);
        margin: 0 auto;
    }

Надеюсь, это поможет, я новичок. Начните с кода на этой неделе

Так что это должно сработать для вас, если вы добавите его в свою таблицу стилей css.

/*whenever the screen size is less than 1000 pixels wide it runs the code inside*/
    @media only screen and (min-width: 1000px){
    .container{
/*sets the container width to 100% - 32 pixels, so you get 16pixel gap on both sides of the container*/
        width: calc(100% - 32px);
        margin: 0 auto;
    }

Вот отличное руководство по этому https://youtu.be/kbLfWKGVsMQ у него также есть другие вещи, довольно хороший канал