Bootstrap表对移动设备无响应

Question

好，所以我有一张桌子，字体太大了。因此引导程序只会停止滚动，这会导致我在此处找到修复程序：

我使用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
    }
我知道它是基本的解决方法，但对我来说很好用

这是针对那些在网上搜索并没有找到任何东西的人，您只需要减小字体大小即可使用CSS。

ps.s。

这是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>          
问题是当您在引导程序中设置响应式时，如果字体对于屏幕而言太大，表格将不会继续滚动，因此例如：ur using一种适合大屏幕的字体，而对于小屏幕太大的字体将无法继续滚动表格。在这里您可以找到有关引导程序中表的所有信息：https://getbootstrap.com/docs/4.4/content/tables/

好，所以我有一张桌子，字体太大了。因此引导程序将仅停止滚动，这使我找到了解决方法，这里是解决方法：使用CSS和媒体查询，我做到了这一点...

Answer 1

<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