twitter-bootstrap - 引导导航扩展到超过视口宽度
问题描述
我正在使用 Bootstrap 并创建一个 Wordpress 主题。当我上传网站时,我发现菜单按钮向右延伸,这仅在移动设备上发生。
这是我的导航条码:
<header class="site-header">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg fixed-top navbar-fixed-top navbar-dark bg-transparent ">
<div class="container">
<a class="navbar-brand" href="#">
<img src="<?php echo get_bloginfo('template_url') ?>/assets/img/logo.png" />
</a>
<button class="navbar-toggler text-white" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon text-white"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link text-white" href="#hero">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link text-white ml-0 ml-lg-5" href="#talents">CHALLENGE</a>
</li>
<li class="nav-item">
<a class="nav-link text-white ml-0 ml-lg-5" href="#contact-us-section">CONTACT US</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
解决方案
问题不在于标题代码,而在于 section class why-us-wrapper
,因为您使用的是 AOS 动画,它会导致溢出并基于它扩展整个屏幕,因为元素来自屏幕右侧。
修复:否则您添加添加position: relative
到.why-us-wrapper
,或添加overflow:hidden
. 您可以同时添加两者。
.why-us-wrapper {
min-height: 50vh;
width: 100%;
overflow: hidden;
position: relative;
}
推荐阅读
- r - 将 R Shiny 与 mysql 连接,mysql 在 rds (AWS) 中运行
- javascript - Jquery 工具提示使用敲除 observable 作为内容
- r - 在零/空值后按组重置行 id
- python - 如何将熊猫数据框绘制为散点图?我想我可能搞砸了索引并且无法添加新索引?
- laravel - laravel 5.6:鉴于每个产品都有多个品牌,如何在表格中显示每个产品和可用品牌
- javascript - 防止 select2 的标签文本中出现空格
- ffmpeg - 如何让ffmpeg保持活力?它继续退出
- python - 如何更新多个 for 循环中的列表?
- soap - Robot Framework 中的 SudsLibrary:获取和设置对象属性
- ios - iOS rxSwift:重试更新刷新令牌时