导航栏无法展开以填充页面的宽度
我正在制作一个网站，希望在移动设备上使用时看起来不错。但是，我想不出要消除navbar右侧多余的空白。
问题图片：
我尝试弄乱CSS和body标签中的nav。另外，我尝试使用wrap来div class="container-fluid">的代码段。
a:hover {
color: hotpink;
}
nav {
background-color: #009fe3;
width: 100%;
box-sizing: content-box;
}
body {
margin: 0;
width: 100%;
}<nav class="navbar navbar-expand-lg navbar-dark">
<div class='container-fluid'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href='/f4'>D</a>
<a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>
<div class='container-fluid'>
<br>
<h2>Heading</h2><small>some url</small>
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2><small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing </th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor </th>
<th scope="col">Eleifend </th>
</tr>
</thead>
<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
在移动（电话）视图上使用Chrome开发者工具查看此HTML时，导航栏右侧有很多空白。但是，我想消除所有空白，并使其成为空白，以便导航栏扩展为填充该空白。当人们使用手机访问该网站时，这看起来会好很多。
5 个答案:
答案 0 :(得分：0)
您的表宽度大于父容器的宽度，您需要调整表的css以使其与屏幕缩放，或者将整个表放入滚动div中。我在下面放了一个滚动div的示例，表css help 100% width table overflowing div container
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<title>Blank</title>
<style>
a:hover {
color: hotpink;
}
nav {
background-color: #009fe3;
width: 100%;
box-sizing: content-box;
}
body {
margin:0;
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class='container-fluid'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href='/f4'>D</a>
<a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>
<div class='container-fluid'>
<br>
<h2>Heading</h2><small>some url</small>
<div style="overflow-y: auto;">
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2><small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing </th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor </th>
<th scope="col">Eleifend </th>
</tr>
</thead>
<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
答案 1 :(得分：0)
这是由于padding所致，对于div，您正在使用width:100%，并且padding也同样适用，因此只有在普通桌面上您才能滚动到底部。清除td的移动视图填充，您将获得良好的进步
答案 2 :(得分：0)
您的表内容正在溢出，这就是为什么要删除空白的原因，因此空白来了，因此您需要减小表格线程文本的字体大小。 字体大小：12px；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<title>Blank</title>
<style>
a:hover {
color: hotpink;
}
nav {
background-color: #009fe3;
width: 100%;
box-sizing: content-box;
}
body {
margin:0;
width: 100%;
}
@media only screen and (max-width: 425px) {
.table thead th {
font-size: 12px;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class='container-fluid'>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href='/f4'>D</a>
<a class="nav-item nav-link active" href="/f1">E<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>
<div class='container-fluid'>
<br>
<h2>Heading</h2><small>some url</small>
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2><small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing </th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor </th>
<th scope="col">Eleifend </th>
</tr>
</thead>
<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
答案 3 :(得分：0)
首先删除所有容器流体类，然后将其替换为“ container”类。您已将nav类的宽度设置为100％，首先将其删除。然后在nav标签前添加一个div，并在nav结束后结束。退出：
<div style=" width: 100%;">
<nav class="navbar navbar-expand-lg navbar-dark">
//NAV CONTENT
</nav>
</div>
答案 4 :(得分：0)
您正在使用表格框大小作为导航的内容框，使用边框框。
nav {
background-color: #009fe3;
width: 100%;
box-sizing: content-box;
}
边框可以计算元素内部的宽度。
表也要熄灭，因此请将表包装在容器中。
您可以看到它正常工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"
/>
<title>Blank</title>
<style>
a:hover {
color: hotpink;
}
nav {
background-color: #009fe3;
width: 100%;
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
}
.table-container {
width: 100%;
overflow-x: scroll;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" href="/">A</a>
<a class="nav-item nav-link" href="/f3">B</a>
<a class="nav-item nav-link" href="/f2">C</a>
<a class="nav-item nav-link" href="/f4">D</a>
<a class="nav-item nav-link active" href="/f1"
>E<span class="sr-only">(current)</span></a
>
<a class="nav-item nav-link" href="/f5">F</a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<br />
<h2>Heading</h2>
<small>some url</small>
<div class="table-container">
<table class="table table-hover">
<thead>
<tr>
<h2>Another heading</h2>
<small>Another url</small>
</tr>
<tr>
<th scope="col">Consectetur</th>
<th scope="col">Adipiscing</th>
<th scope="col">Tristique</th>
<th scope="col">Porttitor</th>
<th scope="col">Eleifend</th>
</tr>
</thead>
<tbody>
<tr>
<td>vitae volutpat</td>
<td>Duis mollis</td>
<td>Nulla ultricies</td>
<td>Vestibulum eleifend</td>
<td>quis nibh</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</body>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？