Bootstrap 引导表即使使用.table-responsive .table也没有响应

uplii1fm 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(2)|浏览(183)

这是我的引导表的代码，一切都很好，但当我切换到移动的它不是添加水平滚动我已经添加了表响应类外部元素与class .table，但它仍然不适用于移动设备

<div class="table-responsive table-area">
      <table class="table table-striped table-dark bordered-table">
        <thead>
            <tr>
              <th scope="col">✔️</th>
              <th scope="col">Questions</th>
              <th scope="col">❤️</th>
            </tr>
        </thead>
        
        <tbody>

        <% allLists.forEach(item=>{ %>

              <tr>
                <th scope="row"> <input class="form-check-input checkbox-solved" type="checkbox" value="" id="flexCheckDefault"> </th>
                <td> <a href="<%= item.url %>"><%= item.name %></a> </td>
                <td> <input class="form-check-input checkbox-favourite" type="checkbox" value="" id="flexCheckDefault"> </td>
              </tr>

        <% }) %>
        </tbody>
      </table>
    </div>

在移动的视图中，甚至不显示绿色刻度表
这是CSS代码

.table-area {
  margin-top: 50px;
  max-width: 1000px;
}

.table-area table {
  text-align: center;
}

table a{
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  font-size: 1.1rem;
  color: #fff;
}

table a:hover {
  color: goldenrod;
}

我认为max-width是造成问题，但我试图删除它太，但它仍然不工作.
有人能帮我解下这个密码吗？

twitter-bootstrap

来源：https://stackoverflow.com/questions/68497618/bootstrap-table-not-responsive-even-with-table-responsive-table

2条答案

按热度按时间

0ejtzxu11#

正如你可以从图片中看到你的第四个问题的文本是没有任何空间，因此它没有 Package 。通常情况下，当你期望这样一个没有空格的长字符串时，我们需要设置宽度，以便它将强制换行。在您的情况下，您可能需要响应式网页设计-媒体查询
这是固定宽度 Package 的样品。但是，您可以合并媒体查询，以实现各种设备上的预期结果

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        width: 135px;
        word-wrap: break-word;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <span>
      LoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsumLoremIpsum
    </span>
  </body>
</html>

赞(0）回复(0）举报 2023-09-28

eaf3rand2#

这听起来很荒谬，但是从table-responsive{overflow-x：auto;...}到表响应{overflow-x：auto;...}（在从Bootstrap下载的css文件中，在冒号和auto之间添加一个空格）使该类再次工作。我有同样的问题，做这个把戏，它再次工作。

赞(0）回复(0）举报 2023-09-28