时间戳

首页 > 解决方案 > 标题汉堡包在移动设备上跳转到视口的左侧

twitter-bootstrap - 标题汉堡包在移动设备上跳转到视口的左侧

问题描述

Navbar 部门缺乏我的引导技能。当屏幕缩小时，我已经让汉堡包做我想做的事。但是当我使用移动设备时，它会移动到屏幕的左侧。我已经添加了我的 html 和我的 css。

此外，您可以在此处查看该网站：https ://grobconnolly.github.io/happyplumbing/

谢谢您的帮助。

body,
html {
  height: 100%;
}

.backgroundHero {
  background-image: url(./images/hero-2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 70%;
}

.heroHead {
  font-size: 50px;
  color: white;
  padding-top: 8%;
}

.heroSub {
  color: white;
  padding-top: 1%;
}

.heroSubNumber {
  font-size: 50px;
  color: white;
  padding-top: 3%;
}

.aboutSection {
  padding-top: 2%;
}

.aboutTitle {
  padding-bottom: 3%;
  font-size: 40px;
}

.testTitle {
  padding-top: 3%;
  font-size: 40px;
}

.aboutUsHead {
  font-size: 33px;
  font-weight: 700;
  padding-top: 7%;
}

.sectionItems {
  padding-bottom: 4%;
  font-size: 20px;
}

.footer {
  margin-top: 1%;
  padding-top: 3%;
  background-color: gray;
  color: white;
}

.address {
  font-size: 9px;
}


/* Service Request */

.serviceBackground {
  padding-top: 3%;
}

@media only screen and (max-width: 738px) {
  .happyLogo {
    width: 40%;
  }
  .backgroundHero {
    background-image: url(./images/hero-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70%;
  }
}

@media only screen and (max-width: 414px) {
  .backgroundHero {
    background-image: url(./images/hero-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 45%;
  }
  .heroHead {
    font-size: 30px;
  }
  .heroSub {
    font-size: 20px;
  }
  .heroSubNumber {
    font-size: 20px;
  }
}

@media only screen and (max-width: 1024px) {
  .backgroundHero {
    background-image: url(./images/hero-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 40%;
  }
  .heroHead {
    font-size: 30px;
  }
  .heroSub {
    font-size: 20px;
  }
  .heroSubNumber {
    font-size: 20px;
  }
}

@media only screen and (max-width: 360px) {
  .backgroundHero {
    background-image: url(./images/hero-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50%;
  }
  .heroHead {
    font-size: 30px;
  }
  .heroSub {
    font-size: 20px;
  }
  .heroSubNumber {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  .backgroundHero {
    background-image: url(./images/hero-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60%;
  }
  .heroHead {
    font-size: 30px;
  }
  .heroSub {
    font-size: 20px;
  }
  .heroSubNumber {
    font-size: 20px;
  }
}

@media only screen and (max-width: 375px) {
  .backgroundHero {
    background-image: url(./images/hero-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 40%;
  }
  .heroHead {
    font-size: 30px;
  }
  .heroSub {
    font-size: 20px;
  }
  .heroSubNumber {
    font-size: 20px;
  }
}

@media only screen and (max-width: 280px) {
  .backgroundHero {
    background-image: url(./images/hero-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 60%;
  }
  .heroHead {
    font-size: 30px;
  }
  .heroSub {
    font-size: 20px;
  }
  .heroSubNumber {
    font-size: 20px;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
  </script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="./assets/style.css">
  <title>HappyPlumbing San Diego</title>
</head>

<body>

  <!-- Navbar-->
  <nav class="navbar navbar-expand-lg navbar-light bg-light static-top">
    <div class="container">
      <a class="navbar-brand" href="./index.html">
        <img class="happyLogo" src="./assets/images/New-HappyPlumbingLOGO.png" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home
                            <span class="sr-only">(current)</span>
                        </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#testimonials">Reviews</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Navbar end -->



  <!-- Footer -->
  <footer>
    <footer class="container-fluid bg-4 footer text-center">
      <div class="row">

        <div class="col-4">
          <span><b>San Diego's Premier Plumbing Company.</b></span>
        </div>
        <div class="col-4">
          <span><b>For Immediate Service:
                        </b>
                        <p>619-433-4943</p>
                        
                    </span>
        </div>

        <div class="col-4">
          <span><b>Our Location:<br></b>10206 El Nopal, Santee, CA 92071</span>
        </div>
      </div>

    </footer>
  </footer>
  <!-- Footer End-->

  <!-- Zoho Chat-->
  <script type="text/javascript">
    var $zoho = $zoho || {};
    $zoho.salesiq = $zoho.salesiq || {
      widgetcode: "9fc8f54f6cb5897ba21cadb922fa712c51eb760371b8fdb02f4a2d168705578a427d5c1c7ae89ec53c2346bb651ae231",
      values: {},
      ready: function() {}
    };
    var d = document;
    s = d.createElement("script");
    s.type = "text/javascript";
    s.id = "zsiqscript";
    s.defer = true;
    s.src = "https://salesiq.zoho.com/widget";
    t = d.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(s, t);
    d.write("<div id='zsiqwidget'></div>");
  </script>
  <!-- Zoho Chat End-->
</body>

</html>

在此处输入图像描述

标签： twitter-bootstrapbootstrap-4

解决方案

如果您查看这种规模的代码（我使用 Chrome DevTools），您会发现它<a class='navbar-brand'...实际上占用了所有空间并向button下推。

一旦button溢出，float-leftBootstrap 的性质就会接管，它就是这样做的。

最简单的解决方法是为navbar-brand链接设置一个最大宽度，以防止它占用所有空间：

将此添加到您现有的媒体查询中：

@media only screen and (max-width: 414px) {
  ...
  .navbar .navbar-brand {
    max-width: 74%;
  }

  .navbar .navbar-toggler {
    max-width: 20%;
  }
}

推荐阅读