时间戳

首页 > 解决方案 > 下拉项目的格式不正确

ruby-on-rails - 下拉项目的格式不正确

问题描述

Rails 6
Bootstrap 4

我正在尝试使用带有按钮的下拉菜单创建导航栏。我期待突出显示的下拉项目是蓝色的，但事实并非如此。请看图片。

在此处输入图像描述

这是我的代码：

#NaviagationBar.btn-group
  .dropdown
    button#BooksMenu.btn.btn-primary.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
      | Books
    .dropdown-menu aria-labelledby="BooksMenu"
      button.btn.dropdown-item type="button"  Action
      button.btn.dropdown-item type="button"  Another action
      button.btn.dropdown-item type="button"  Something else here
  .dropdown
    button#CardsMenu.btn.btn-primary.dropdown-toggle aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="button"
      | Cards
    .dropdown-menu aria-labelledby="CardsMenu"
      button.btn.dropdown-item type="button"  Action
      button.btn.dropdown-item type="button"  Another action
      button.btn.dropdown-item type="button"  Something else here

有任何想法吗？

编辑：

当我点击菜单项时，它会变成一个蓝色按钮，但当我将鼠标悬停在它上面时不会。

标签： ruby-on-railstwitter-bootstrap

解决方案

只需从您的下拉项目按钮替换dropdown-item btn类？btn btn-primary w-100

代替 ：

<button class="dropdown-item btn" href="#">Action</button>

经过 ：

<button class="btn btn-primary w-100" href="#">Action</button>


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  </head>
  <body>
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <button class="btn btn-primary w-100" href="#">Action</button>
        <button class="btn btn-primary w-100" href="#">Another action</button>
        <button class="btn btn-primary w-100" href="#">Something else here</button>
      </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

推荐阅读