我每个人。
我网站上的导航栏有问题。在移动的版上，导航栏中的切换按钮将网站向左移动，内容不居中。
但是，在我的导航器上，在响应模式下，网站是居中的，切换按钮不会将网站移到左边。
我的HTML代码：
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Valentin Fauchère Développeur Web PHP</title>
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<meta name="robots" content="noimageindex">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<header class="fixed-top">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="index.php">Valentin Fauchère</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#qsj">Qui-suis-je</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#competences">Compétences</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#real">Réalisations</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div class="box-present">
<div class="box-present-title">
<h1>Valentin Fauchère</h1>
<h2>Développeur Web PHP</h2>
</div>
<div class="box-present-img-dev">
<div class="box-img-perso">
<img src="vf.jpg" class="img-perso" alt=" " />
</div>
</div>
</div>
<div data-bs-spy="scroll" data-bs-target="#navbar-website" data-bs-offset="0" tabindex="0">
/* the rest of the main */
</main>
<footer>
... /*the rest of the footer*/
</footer>
</body>
</html>我的CSS代码：
body {
background-color: white;
width: 100%;
font-size: 1rem;
z-index: 1;
}
header {
background-color: white;
}
.navbar-brand {
font-size: 3rem;
color: #303030;
font-family: 'Oswald', sans-serif;
}
.navbar-brand:hover {
color: #303030;
}
.nav-link {
color: #303030;
font-family: 'Roboto', sans-serif;
font-size: 1.8rem;
padding-bottom: 0.5rem;
}
.navbar-nav {
margin-left: auto;
}
.nav-item {
margin-right: 1rem;
margin-left: 1rem;
text-align: center;;
}
.nav-link:hover {
color: #303030;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(48,48,48, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
width: 5rem;
height: 5rem;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}
.box-present {
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
margin-top: 15rem;
}
.box-present-title {
background-color: #54F98D;
width: 600px;
height: 350px;
display: flex;
flex-direction: column;
justify-content: center;
}
.box-present-img-dev {
display: flex;
background-color: #FF866A;
width: 600px;
height: 400px;
align-items: center;
}
.box-title-site {
text-align: center;
clear: both;
}
.box-present-title > h1 {
color: #303030;
font-family: 'Oswald', sans-serif;
font-size: 3.5rem;
margin-left: auto;
margin-right: auto;
width: 12rem;
text-align: center;
}
.box-img-perso {
text-align: center;
margin-left: auto;
margin-right: auto;
width: auto;
}
.box-present-title > h2 {
color: #303030;
font-family: 'Oswald', sans-serif;
font-size: 2rem;
margin-left: auto;
margin-right: auto;
width: 12rem;
text-align: center;
}
.box-img-perso > .img-perso {
height: 60%;
width: 60%;
border: 15px solid #303030;
border-radius: 50% 20% / 10% 40%;
}
/* the rest of the css */你有解决这个问题的线索吗？
一个链接“测试”网站：https://test.valentin-fauchere.net
2条答案
按热度按时间f5emj3cl1#
我看了你的网站。
你必须改变一些东西。这个问题是由你的页面上不同元素的
width引起的，它们比屏幕宽度要宽。另外，要注意边距和填充。使用如下
@media查询更改移动设备的样式：nue99wik2#
HTML代码：
CSS代码：