javascript - Bootstrap-vue 导航栏未按预期呈现
问题描述
我正在使用 bootstrap-vue 并尝试在应用程序内创建导航栏组件,我使用的是此链接文档中提供的第一个示例,我已按照 bootstrap-vue 说明中的说明安装了所有依赖项。我正在尝试将此导航栏用作组件,并使用以下代码来创建和渲染它。
导航栏.vue
<template>
<div>
<b-navbar toggleable="lg" type="dark" variant="info">
<b-navbar-brand href="#">NavBar</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template #button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>
<script>
export default {
name: 'NavBar',
data () {
return {}
}
}
</script>
和
应用程序.vue
<template>
<div>
<NavBar></NavBar>
<div id="app">
<router-view />
</div>
</div>
</template>
<script>
import NavBar from '@/components/NavBar'
export default {
components: {
NavBar: NavBar
},
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
预期输出与我的结果
期望
要查看预期输出,请点击此链接
结果
我没有足够的声誉来发布图片,但是如果需要进一步得出结论,我可以上传屏幕截图,基本上导航栏发生的事情是它渲染得很好,很明显引导程序的某些元素(对于例如下拉菜单和搜索栏)但是,navbar.vue 第 15 行的 ml-auto 对具有其类的导航栏项目没有任何影响。导航栏项目都聚集在左侧,还有一些奇怪的边距错误。我发现了一个类似的堆栈溢出问题,并ml
通过将其替换为成功解决了无法正常工作的问题ms
但无法在文档中找到它让我厌倦了使用它作为解决方案,它也不会阻止搜索栏和搜索按钮的奇怪集群。如果一切配置正确,代码应该像示例中那样运行,因为它适用于playground
引导文档的组件。
其他stackoverflow文章
还有另一篇 stackoverflow 文章讨论了 ml-auto 如何在 bootstrap 5 中不起作用,以及如何使用 ms-auto 但是我没有在 bootstrap 5 中找到任何 ms 类的文档。
要阅读该文章,请点击此链接
解决方案
根据我的评论-Bootstrap-vue 不适用于 bs5:“BootstrapVue 拥有超过 85 个组件、超过 45 个可用插件、多个指令和 1200 多个图标,提供了Bootstrap v4组件和网格系统最全面的实现之一对于 Vue.js v2.6"
推荐阅读
- c# - 在 DataGridViewComboBoxColumn 中使用来自 AutoComplete 的键入文本,即使该值不在组合框数据源中
- azure - 为什么我不能在 Azure 函数中使用计时器触发时的输出绑定?
- c# - 输入参数为空时如何跳过 EF Take?
- javascript - 提取所有以数字开头的单词
- java - 无法使用 Randoop 生成测试类
- vim - 将所有匹配行移到某个字符串第一次出现的后面
- php - 为什么添加 PHP 表单验证码后我的联系表单无法显示?
- php - 从某些数组位置复制数据并将它们添加到数组的开头
- binding - 是否有一些模型可用于理解 Raku 中的容器、引用、原始、rw、\?
- mysql - SQL查询更新具有相同文件名的记录