使下拉菜单在引导程序中浮动

Posted 2023-05-09

【中文标题】使下拉菜单在引导程序中浮动

【英文标题】：Make dropdown menu floating in bootstrap

【发布时间】：2021-05-21 13:37:55

【问题描述】：

我正在尝试使用引导程序创建一个非常复杂的导航栏。我想知道是否可以使下拉菜单浮动，因此它不会使导航栏变得又大又丑。图片很不言自明：

代码：

.menu-item-seleccionado 
  color: white !important;
  background-color: grey;
  padding: 10px !important;


.menu-item-sin-seleccionar 
  color: white !important;
  padding: 10px !important;


.titulo-menu 
  margin-left: 1%;
  color: white !important;

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
  
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
  <div class="container-fluid" style="margin: 0; width: 100%;">

    <div class="flex-izquierda">
      <a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
    </div>

    <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
      aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="flex-derecha collapse navbar-collapse" id="bar">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
        <li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>

        <li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>

        <li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>

        <li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>

        <!-- Imagen para cambiar el idioma -->
        <li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
          <img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" >
        </a>
      </li>
      </ul>
    </div>
  </div>
</nav>

【参考方案1】：

.menu-item-seleccionado 
  color: white !important;
  background-color: grey;
  padding: 10px !important;


.menu-item-sin-seleccionar 
  color: white !important;
  padding: 10px !important;


.titulo-menu 
  margin-left: 1%;
  color: white !important;





@media screen and (max-width: 736px) 
    
    .navbar-expand-lg .navbar-collapse 
    flex-basis: auto;

.flex-derecha 
    width: 250px;
    position: absolute;
    height: auto;
    background: black;
    top: 50px;
    right: 0;

.collapse:not(.show) 
    display: none !important;

.nav-item

   width:250px;

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
  
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-dark">
  <div class="container-fluid" style="margin: 0; width: 100%;">

    <div class="flex-izquierda">
      <a class="navbar-brand titulo-menu" href="inicio.html">Resano Innovación</a>
    </div>

    <button class="navbar-toggler bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#bar"
      aria-controls="bar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="flex-derecha collapse navbar-collapse" id="bar">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0" style="margin: 0 !important; ">
        <li class="nav-item"><a class="nav-link active rounded menu-item-seleccionado" aria-current="page" href="inicio.html">Inicio</a></li>

        <li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="ubicacion.html">Ubicación</a></li>

        <li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="contacto.html">Contacto</a></li>

        <li class="nav-item"><a class="nav-link menu-item-sin-seleccionar" href="certificado.html">Certificado de calidad</a></li>

        <!-- Imagen para cambiar el idioma -->
        <li class="nav-item"><a class="navbar-brand" href="../en/inicio.html">
          <img src="../img/eng.png" style="max-width: 100%; max-height: 40px; padding-left: 10px;" >
        </a>
      </li>
      </ul>
    </div>
  </div>
</nav>

【讨论】：

你没有 css 格式规范吗？