Bootstrap 4 - H3 внутри раскрывающейся ссылки

У меня есть сомнения относительно раскрывающегося списка на панели навигации. Для обычной навигационной ссылки (без раскрывающегося списка) я помещаю текст меню внутри H3, но когда я попытался сделать то же самое для раскрывающейся ссылки, стрелка оказалась не рядом с заголовком, а под ним. Я решил заменить h3 на span и дать тот же CSS, что и h3, на этот раз стрелка была в нужном месте, но все остальные стили не были учтены.

Третий пример более близок к тому, что я хочу, но размер шрифта не тот.

Исходный код без раскрывающегося списка

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

17.01.2019 11:10

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

178

Ответы 2

передайте position:relative в h3 и position:absolute в: after и соответствующим образом отрегулируйте. Благодарность

В каком случае (1, 2 или 3)?

— 17.01.2019 11:31

добавить это к попытке 1

— 17.01.2019 11:47

Это не сработало, но все равно спасибо; Я использовал обходной путь для решения своей проблемы. Я просто поместил display none в ".dropdown-toggle :: after", а затем добавил диапазон внутри h3 с помощью класса FontAwesome.

— 17.01.2019 16:07

17.01.2019 11:26

Обходной путь

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>