css Bootstrap导航栏中的切换按钮将内容向左移动

1cklez4t  于 2022-12-24  发布在  Bootstrap
关注(0)|答案(2)|浏览(274)

我每个人。
我网站上的导航栏有问题。在移动的版上,导航栏中的切换按钮将网站向左移动,内容不居中。
但是,在我的导航器上,在响应模式下,网站是居中的,切换按钮不会将网站移到左边。
我的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

f5emj3cl

f5emj3cl1#

我看了你的网站。
你必须改变一些东西。这个问题是由你的页面上不同元素的width引起的,它们比屏幕宽度要宽。另外,要注意边距和填充。

.form-input-area {
    width: 550px; /* Problematic */
}

.form-input-line {
    width: 450px; /* Problematic */
}

.card-title.real-title a {
    /* Problematic */
}

使用如下@media查询更改移动设备的样式:

@media only screen and (max-width: 575px) {
    .form-input-area {
        width: 100vw;
    }
    
    .form-input-line {
        width: 100vw;
    }
}
nue99wik

nue99wik2#

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: #00cc99;
}

.navbar {
    background-color: white;
    height: 10rem;
}

.navbar-toggler {
    border-color: #00cc99;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 204, 153, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 767px) {
  .navbar {
    position: fixed;
    left: 0;
    right: 0;
  }
  main {
    padding-top: 60px;
  }
}

相关问题