bootstrap-4 - 如何在不破坏原始导航栏布局的情况下添加切换栏?
问题描述
我正在使用引导程序构建一个导航栏,左侧是我的名字,右侧是链接。布局很好,直到我添加了切换按钮。它现在在左侧显示我的名字,而在其右侧显示链接,而不是在右侧(当页面展开时)。当页面最小化时,它看起来很好。我怎样才能解决这个问题?
<nav class="navbar navbar-expand-md navbar-dark bg-dark d-flex justify-content-between">
<h1 class="text-white"> Aiya Siddig</h1>
<button class = "navbar-toggler" data-toggle = "collapse" data-target = "#collapse_target">
<span class = "navbar-toggler-icon" ></span>
</button>
<div class = "collapse navbar-collapse" id = "collapse_target">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"> About Me </a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html"> Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"> Contact </a>
</li>
</ul>
</div>
</nav>
解决方案
您可以在您的中使用引导类justify-content以确保您的链接始终指向更大的内容。flex-end
collapse
navbar
right
screen
responsive
现场工作演示:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark d-flex justify-content-between">
<h1 class="text-white"> Aiya Siddig</h1>
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapse_target">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html"> About Me </a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html"> Portfolio </a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html"> Contact </a>
</li>
</ul>
</div>
</nav>
推荐阅读
- powerbi - 当我已经连接到 Analysis Services 时,如何在 power bi 中添加其他数据?
- python - PySpark:为数据帧操作转换配置字符串项
- google-analytics-4 - 自定义 GA4 事件中的通过日期
- cookies - 无法在新打开的选项卡中设置 cookie (Safari 14)
- jquery - formData在文件上传ajax laravel上返回空对象
- php - 标识符值或配置无效
- vue.js - Nuxt.js 为自定义插件返回未定义
- pyspark - 比较两个不同的 pyspark 数据帧
- accessibility - 自动滚动内容在可访问性方面是不好的做法吗?
- datatables-1.10 - 使用向下箭头和向上箭头时 dataTable 使用 fixedcolumns 属性使列未对齐