代码之家 › 专栏 › 技术社区 › DotNetRussell

引导表溢出屏幕,导航栏没有

bootstrap-4 css html

DotNetRussell · 技术社区 · 3 年前

所以这是一个有点复杂的问题。请记住,我不是一个专业的网络开发人员。我也尝试过解决方案 here 和 here

这张照片是它在手机上的外观模型。在桌面上,一切看起来都很好。直到我在手机上打开它,才发现有任何问题。

理想情况下,我希望表格能用滚动条放在屏幕上,但导航条的宽度与表格不一样,这也很麻烦。

我试图将代码简化为元素、类和样式。如果你还想看什么,请告诉我

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- â load jQuery â -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>
    <div id="banner_element"></div>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="margin-top: 10px;">             
        <button class="navbar-toggler" 
                type="button" 
                data-toggle="collapse" 
                data-target="#navbarDiv" 
                aria-controls="navbarDiv" 
                aria-expanded="false" 
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarDiv">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/">Click me</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="container-fluid" style="margin-bottom: 100px;">
        <div class="row d-flex justify-content-center">
            <h1 class="mb-3">Page Title</h1>
        </div>
        <div style="padding-bottom: 100px;">
            <table class="table" style="overflow-x: visible; overflow-y: visible; height: 100%;" id="myTable">
                <thead>
                    <th></th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </thead>
                <tr id='${element["Id"]}'>
                  <td><button onclick="location.href='/'">ð</button></td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                </tr>
            </table>
        </div>
    </div>
</body>

1 回复 | 直到 3 年前

str1ng 3 年前

从Bootstrap 4开始,他们已经涵盖了这一点(增加了响应能力)。

您可以通过特定于断点来使表响应:

使用 .table-responsive{-sm|-md|-lg|-xl} 根据需要创建到达特定断点的响应表。 从该断点开始,表将正常运行,不会水平滚动。

通过使表格始终(在所有屏幕宽度上)响应(滚动条),通过添加 .table-responsive 桌子上的课。

对于更高级的(使)列进入新行和类似的内容,您可以参考 responsive data tables

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

11 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

11 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

11 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

11 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

11 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

11 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

11 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

12 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

12 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

12 月前