Vue：如何在引导容器类的顶部修复导航栏

Posted 2023-02-16

【中文标题】Vue：如何在引导容器类的顶部修复导航栏

【英文标题】：Vue : How to fix navbar on top inside bootstrap container class

【发布时间】：2021-06-30 06:28:55

【问题描述】：

我有这个 vue app.js 模板：

<template>
  <div id="app" class="container shadow px-0">
      <NavBar/> 
      <Slider/> 
  </div>
</template>

导航栏组件在 div 类中，顶部固定，引导程序：

<div class="fixed-top">
   <div></div>
   <nav></nav>
</div>

我想显示具有容器宽度的导航栏菜单，但是当我添加固定顶部时，它将占用 100% 的屏幕，如下图所示：

【问题讨论】：

你可以尝试在固定的div上使用width:inherit吗？

@Charlie 我用过 但还是不行

请做一个最小的可重现示例。如果无法访问 html 本身，很难为您提供帮助

@Charlie 我解决了非常感谢

【参考方案1】：

我通过将其添加到固定顶部 div 来解决它：

 <div class="fixed-top" style="max-width:inherit;margin:auto">