Bootstrap 4 - 下拉链接中的 H3

【问题标题】：Bootstrap 4 - H3 inside Dropdown linkBootstrap 4 - 下拉链接中的 H3
【发布时间】：2019-01-17 23:21:05
【问题描述】：

我对导航栏中的下拉菜单有疑问。对于普通的导航链接（无下拉菜单），我将菜单文本放在 H3 中，但是当我尝试对下拉链接执行相同操作时，箭头不在标题旁边，而是在标题下方。我决定用 span 替换 h3 并提供与 h3 相同的 CSS，这次箭头在正确的位置，但没有考虑所有其他样式。

第三个例子更接近我想要的，但字体大小不太一样。

原码无下拉

html {
  font-size: 16px;
}

body {
  font-family: Arial;
  font-size: 1rem;
}

#logo {
  max-height: 2.5rem;
}

.nav_container {
  margin-bottom: 10%;
}

h1,h2,h3,h4,h5,h6 {
  margin-bottom: .25rem;
  margin-top: .25rem;
}

h3 {
  font-size: 1.25rem;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Original</title>
  <!-- Bootstrap 3.0-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Bootstrap 4.0-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

  <!-- FontAwesome5 Icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  
  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <!-- Fin liens CSS et Script -->
</head>

<body>
  <div class="nav_container">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <div class="d-flex align-items-center">
        <a class="navbar-brand" href="#"><img id="logo" src="https://i.stack.imgur.com/440u9.png"></a>
      </div>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link text-uppercase" href="index.php">
            <h3 class="font-weight-bold">Home</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link1</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link2</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link3</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link4</h3>
          </a>
        </li>

      </ul>
    </nav>
  </div>
</body>

</html>

我的尝试

html {
  font-size: 16px;
}

body {
  font-family: Arial;
  font-size: 1rem;
}

#logo {
  max-height: 2.5rem;
}

.nav_container {
  margin-bottom: 10%;
}

#navbardrop {
  font-size: 1.25rem;
}

#navbardrop2 {
  font-size: 1.25rem;
}

#navbardrop3 { 
  font-size: 1.25rem;
  margin-bottom: .25rem;
  margin-top: .25rem;
}

#admin_menu {
  font-weight: 700!important;
  margin-bottom: .25rem;
  margin-top: .25rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: .25rem;
  margin-top: .25rem;
}

h3 {
  font-size: 1.25rem;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <!-- Bootstrap 3.0-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <!-- Bootstrap 4.0-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

  <!-- FontAwesome5 Icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

  <!-- CSS-->
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <!-- Fin liens CSS et Script -->
</head>

<body>
  <h2>Try 1</h2>
  <div class="nav_container">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="d-flex align-items-center">
        <a class="navbar-brand" href="#"><img id="logo" src="https://i.stack.imgur.com/440u9.png"></a>
      </div>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link text-uppercase" href="index.php">
            <h3 class="font-weight-bold">Home</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link 1</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link2</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link3</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link4</h3>
          </a>
        </li>

        <!-- Admin  -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
            <h3 id="admin_menu">Admin</h3>
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <h4>Admin1</h4>
            </a>
            <a class="dropdown-item" href="#">
              <h4>Admin2</h4>
            </a>
          </div>
        </li>
      </ul>
    </nav>
  </div>

  <h2>Try 2</h2>

  <div class="nav_container">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="d-flex align-items-center">
        <a class="navbar-brand" href="#"><img id="logo" src="https://i.stack.imgur.com/440u9.png"></a>
      </div>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link text-uppercase" href="index.php">
            <h3 class="font-weight-bold">Home</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link 1</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link2</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link3</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link4</h3>
          </a>
        </li>

        <!-- Admin  -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbardrop2" data-toggle="dropdown"><span id="admin_menu">Admin</span></a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <h4>Admin1</h4>
            </a>
            <a class="dropdown-item" href="#">
              <h4>Admin2</h4>
            </a>
          </div>
        </li>
      </ul>
    </nav>
  </div>

  <h2>Try 3</h2>

  <div class="nav_container">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
      <div class="d-flex align-items-center">
        <a class="navbar-brand" href="#"><img id="logo" src="https://i.stack.imgur.com/440u9.png"></a>
      </div>
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link text-uppercase" href="index.php">
            <h3 class="font-weight-bold">Home</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link 1</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link2</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link3</h3>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">
            <h3 class="font-weight-bold">Link4</h3>
          </a>
        </li>

        <!-- Admin  -->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle font-weight-bold" href="#" id="navbardrop3" data-toggle="dropdown">Admin</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">
              <h4>Admin1</h4>
            </a>
            <a class="dropdown-item" href="#">
              <h4>Admin2</h4>
            </a>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</body>

</html>

【问题讨论】：

    标签： css drop-down-menu bootstrap-4


    【解决方案1】：

    将position:relative 分配给 h3 并将position:absolute 分配给 :after 并相应地进行调整。谢谢

    【讨论】：

    • 哪种情况（1、2或3）？
    • 将其添加到 try 1
    • 没用，不过还是谢谢；我使用了一种解决方法来解决我的问题。我只是将 display none 放入“.dropdown-toggle::after”，然后在 h3 中添加了一个带有 FontAwesome 类的跨度。
    【解决方案2】：

    解决方法

    CSS

    #navbardrop{
  font-size: 1.25rem;
}

#admin_menu {
  font-weight: 700!important;
  margin-bottom: .25rem;
  margin-top: .25rem; 
}

h3{
    font-size: 1.25rem;
}

.dropdown-toggle::after{
    display: none;
}

h4{
    font-size: 1rem;
}

    HTML

    <div class="nav_container">
            <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
                <div class="d-flex align-items-center">
                    <a class="navbar-brand" href="homepage"><img id="logo" src="images/logo.jpg"></a>
                </div>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link text-uppercase" href="index.php"><h3 class="font-weight-bold">Accueil</h3></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="add_mat.php"><h3 class="font-weight-bold">Ajout Matériel</h3></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="add_cat.php"><h3 class="font-weight-bold">Ajout Catégorie</h3></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="add_type.php"><h3 class="font-weight-bold">Ajout Type</h3></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="add_model.php"><h3 class="font-weight-bold">Ajout Modèle</h3></a>
                    </li>

                    <!-- Admin  -->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                            <h3 id="admin_menu">Admin <span class="fas fa-angle-down"></span></h3>
                        </a>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="../update_data.php"><h4>Update Data</h4></a>
                            <a class="dropdown-item" href="../bd_tables.php"><h4>Tableaux BD</h4></a>
                        </div>
                    </li>
                </ul>
            </nav>
        </div>

    结果

    【讨论】：

      猜你喜欢
      • 2020-03-25
      • 2020-08-11
      • 1970-01-01
      • 2018-09-07
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-19
      • 2018-08-27
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode