Bootstrap issue - overflow on the right
I am building a web app which is basically just one page containing a table.
The code looks more or less like this:
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="10">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body style="width: 100%">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
<div class="col-xl-12">
<nav class="navbar navbar-expand bg-dark navbar-dark fixed-top mb-3" style="height:10px" >
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="en">en</a>
</li>
<li class="nav-item">
<a class="nav-link" href="zh">中</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"></a>
</li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid" style="margin-top:70px;">
<div class="row">
<div class="col">
<table class="table table-striped" style="width: 100%; font-size: 16px !important;">
<thead>
<tr>
<th class="text-center" scope="col">E.g.1</th>
<th class="text-center" scope="col">E.g.2</th>
<th class="text-center" scope="col">E.g.3</th>
<th class="text-center" scope="col">E.g.4</th>
<th class="text-center" scope="col">E.g.5</th>
<th class="text-center" scope="col">E.g.6</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">Text 1</td>
<td class="text-center">Text 2</td>
<td class="text-center">Text 3</td>
<td class="text-center">Text 4</td>
<td class="text-center">Text 5</td>
<td class="text-center">Text 6</td>
</tr>
<tr>
<td class="text-center">Text 1</td>
<td class="text-center">Text 2</td>
<td class="text-center">Text 3</td>
<td class="text-center">Text 4</td>
<td class="text-center">Text 5</td>
<td class="text-center">Text 6</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
So it should just displaying a navigation bar on top and then a table.
The problem is the following: while the page fits the screen good on laptop, it always overflows on the right (around 20% of the size) when opening the page from smartphone (then it is possible to "zoom out" and make the page occupy the full screen, but I want the table to fit the screen already when opening the page).
Also, note that if I replace:
<table class="table table-striped"
with
<table
The page fits the screen correctly from smartphone as well, but I want to be able to use the table-striped style.
EDIT:开发者_StackOverflow The behaviour can be reproduced by copy-pasting the code here: https://codebeautify.org/htmlviewer Opening it from smartphone, you can see the last one and a half column overflows on the right, while this does not happen on laptop.
I'm quite sure I'm missing something basic here related to bootstrap, but I've been trying to change things for a few hours now with no results, so I hope someone can give me a hint on what could possibly go wrong here. Thank you!
加载中,请稍侯......
精彩评论