bootstrap таблица не отвечает на запросы мобильных устройств - PullRequest
Новая
       70

bootstrap таблица не отвечает на запросы мобильных устройств

0 голосов
/ 14 марта 2020

хорошо, поэтому у меня была таблица, где шрифты слишком велики для использования. так что bootstrap просто остановит прокрутку, в точке, которая привела меня к поиску исправления, вот исправление:

с использованием css и медиазапросом я сделал этот код: 

@media screen and (max-width:768px){ 
#getting-started{/* the div or class id (my case div)/*
        font-size:12px;
    }

    #day{
        font-size:14px
    }
    #minutes{
        font-size:14px
    }
    #hours{
        font-size:14px
    }

я знаю, что это базовое c исправление, но оно отлично сработало для меня

это для тех парней, которые искали в Интернете и не нашли ничего, вам просто нужно уменьшить размер шрифта с помощью css ,

ps

вот код html 

        <div id="getting-started">
  <div class="container table-responsive-xl">
    <div class="row">
      <div class="col-12 col-sm-12 col-md-12 m-12 offset-lg-12 col-lg-12">
        <div class="card">
          <div class="card-header">
              <img class="card-img-top" src="cherries.png" alt="Card image cap">
              <h1>Next Event:</h1>

            <div class="card-body">

              <table class="table" summary="date and time for the next event">
                <tr>
                  <th scope="col-4">Days</th>
                  <th scope="col-4">Hours</th>
                  <th scope="col-4">Minutes</th>
                </tr>
                <tr>
                  <td id="day" class="display-4"></td>
                  <td id="hours" class="display-4"></td>
                  <td id="minutes" class="display-4"></td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
            </div>

проблема заключается в том, что при установке чувствительности в bootstrap таблица не будет продолжать прокручиваться, если Ваши шрифты слишком велики для экрана, поэтому, например: если вы используете шрифт, который подходит для большого экрана и слишком большой для маленького экрана, он не будет продолжать прокручивать таблицу. Здесь вы можете найти всю информацию о таблицах в bootstrap: https://getbootstrap.com/docs/4.4/content/tables/

1 Ответ

1 голос
/ 14 марта 2020 
<div> tag is not  closed properly. for Example

    <div class="card">
     <div class="card-header"></div>
     <div class="card-body"></div>
    </div>

Table Responsive tag:
<div class="table-responsive">
  <table class="table">

  </table>
</div>


Our code may be like this:
  <div class="container ">
    <div class="row">
        <div class="col-12 col-sm-12 col-md-12 m-12 offset-lg-12 col-lg-12">
            <div class="card">
                <div class="card-header">
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table"> 
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


Kindly refer the following URL: [https://www.w3schools.com/bootstrap4/bootstrap_tables.asp][1]
[https://www.w3schools.com/bootstrap4/bootstrap_cards.asp][2]

            <div id="getting-started">
      <div class="container ">
        <div class="row">
          <div class="col-12 col-sm-12 col-md-12 m-12 offset-lg-12 col-lg-12">
            <div class="card">
              <div class="card-header">
                  <img class="card-img-top" src="cherries.png" alt="Card image cap">
                  <h1>Next Event:</h1>
              </div>
                <div class="card-body">
                    <div class="table-responsive-xl">
                      <table class="table" summary="date and time for the next event">
                        <tr>
                          <th scope="col-4">Days</th>
                          <th scope="col-4">Hours</th>
                          <th scope="col-4">Minutes</th>
                        </tr>
                        <tr>
                          <td id="day" class="display-4"></td>
                          <td id="hours" class="display-4"></td>
                          <td id="minutes" class="display-4"></td>
                        </tr>
                      </table>
                  </div>
                </div>   
             </div>
            </div>
          </div>
        </div>
      </div>



  [1]: https://www.w3schools.com/bootstrap4/bootstrap_tables.asp
  [2]: https://www.w3schools.com/bootstrap4/bootstrap_cards.asp
...