Стрелка раскрывающегося списка над текстом на панели навигации - PullRequest
Новая
       1

Стрелка раскрывающегося списка над текстом на панели навигации

0 голосов
/ 09 мая 2020

Я пытаюсь открыть раскрывающийся список на элементе панели навигации. Работает, но стрелка находится над текстом пункта меню. enter image description here

Codepen:

https://codepen.io/ogonzales/pen/QWjmorP

Код 

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="height: 70px;">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            More
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="/support/">Support and Consulting</a>
            <a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
            <a class="dropdown-item" href="/testimonials/">Testimonials</a>
          </div>
        </li>
      </ul>

        <form class="form-inline ml-auto">
          <a href="{% url 'account_login' %}" class="btn btn-outline-secondary">Log in</a>
          <a href="{% url 'account_signup' %}" class="btn btn-primary ml-2">Sign up</a>
        </form>

    </div>
  </nav>

Бонус

Я бы также хотел расположить каждый элемент навигационной панели правее. Я знаю, что могу сделать это с помощью CSS, но есть ли класс Boostrap, который мне не хватает?

Ответы [ 3 ]

1 голос
/ 09 мая 2020

Ваш тег ul не был закрыт, я исправил это и также ответил на ваш bonus вопрос.

  1. Причина, по которой он был в тексте, потому что оба dropdown и link находились в одном блоке, поэтому вы должны указать width для тех, которые будут встроены в строку, я только что предоставил 100px под .nav-link{...}, и вы можете изменить это в соответствии с ваше требование.
  2. Чтобы переместить содержимое вправо, вы можете иметь свойство width для желтого блока (проверьте мой фрагмент / скрипт) ИЛИ вы можете предоставить параметр flex для блока и использовать 'justify-content : space-between; `.

Просмотр в полноэкранном режиме, поскольку вы использовали media-query.

.nav-link{ border:1px solid yellow; margin:5px; width:100px; }

скрипка на игровую площадку. 

$(document).ready(function() {

  $('#sidebarCollapse').on('click', function() {
    $('#sidebar').toggleClass('active');
  });

});
/* Sticky footer styles
-------------------------------------------------- */

html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  margin-bottom: 60px;
  /* Margin bottom by footer height */
  font-family: 'Poppins', sans-serif;
  background: #fafafa;
  padding-top: 70px;
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  /* Set the fixed height of the footer here */
  line-height: 60px;
  /* Vertically center the text there */
  background-color: #f5f5f5;
}


/* NAVBAR TOP */

#top-navbar ul li.active>a a[aria-expanded="true"] {
  color: #1f1f1f;
  background: #12b556;
}

#top-navbar a:visited {
  color: #fff;
}

#top-navbar a:link {
  color: #fff;
}

#top-navbar a.subitem:link {
  color: #1f1f1f;
}


/* ==== */


/* SIDEBAR */


/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

.wrapper {
  display: flex;
  align-items: stretch;
}

#sidebar {
  min-width: 250px;
  max-width: 250px;
  background: #1f1f1f;
  color: #fff;
  transition: all 0.3s;
}

#sidebar.active {
  min-width: 80px;
  max-width: 80px;
  text-align: center;
}

#sidebar.active .sidebar-header h3,
#sidebar.active .CTAs {
  display: none;
}

#sidebar.active .sidebar-header strong {
  display: block;
}

#sidebar ul li a {
  text-align: left;
}

#sidebar.active ul li a {
  padding: 20px 10px;
  text-align: center;
  font-size: 0.85em;
}

#sidebar.active ul li a i {
  margin-right: 0;
  display: block;
  font-size: 1.8em;
  margin-bottom: 5px;
}

#sidebar.active ul ul a {
  padding: 10px !important;
}

#sidebar.active .dropdown-toggle::after {
  top: auto;
  bottom: 10px;
  right: 50%;
  -webkit-transform: translateX(50%);
  -ms-transform: translateX(50%);
  transform: translateX(50%);
}

#sidebar .sidebar-header {
  padding: 20px;
  background: #1f1f1f;
}

#sidebar .sidebar-header strong {
  display: none;
  font-size: 1.8em;
}

#sidebar ul.components {
  padding: 20px 0;
  border-bottom: 1px solid #47748b;
}

#sidebar ul li a {
  padding: 10px;
  font-size: 1.1em;
  display: block;
}

#sidebar ul li a:hover {
  color: #12b556;
  background: #fff;
}

#sidebar ul li a i {
  margin-right: 10px;
}

#sidebar ul li.active>a.sidebar-link a[aria-expanded="true"] {
  color: #fff;
  background: #12b556;
}

a[data-toggle="collapse"] {
  position: relative;
}

#navbarCollapse {
  border: 1px solid red;
}

.nav-link {
  border: 1px solid yellow;
  margin: 5px;
  width: 100px;
}

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

ul ul a {
  font-size: 0.9em !important;
  padding-left: 30px !important;
  background: #12b556;
}

ul.CTAs {
  padding: 20px;
}

ul.CTAs a {
  text-align: center;
  font-size: 0.9em !important;
  display: block;
  border-radius: 5px;
  margin-bottom: 5px;
}

a.download {
  background: #fff;
  color: #12b556;
}

a.article,
a.article:hover {
  background: #12b556 !important;
  color: #fff !important;
}

a.sidebar-link:visited {
  color: #fff;
}

a.sidebar-link:link {
  color: #fff;
}


/* ---------------------------------------------------
  CONTENT STYLE
----------------------------------------------------- */

#content {
  width: 100%;
  padding: 20px;
  min-height: 100vh;
  transition: all 0.3s;
}


/* ---------------------------------------------------
  MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 768px) {
  #sidebar {
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    margin-left: -80px !important;
  }
  .dropdown-toggle::after {
    top: auto;
    bottom: 10px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
  }
  #sidebar.active {
    margin-left: 0 !important;
  }
  #sidebar .sidebar-header h3,
  #sidebar .CTAs {
    display: none;
  }
  #sidebar .sidebar-header strong {
    display: block;
  }
  #sidebar ul li a {
    padding: 20px 10px;
  }
  #sidebar ul li a span {
    font-size: 0.85em;
  }
  #sidebar ul li a i {
    margin-right: 0;
    display: block;
  }
  #sidebar ul ul a {
    padding: 10px !important;
  }
  #sidebar ul li a i {
    font-size: 1.3em;
  }
  #sidebar {
    margin-left: 0;
  }
  #sidebarCollapse span {
    display: none;
  }
}
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <title>{% block title %}DjangoX{% endblock title %}</title>
  <meta name="description" content="A framework for launching new Django projects quickly.">
  <meta name="author" content="">
  <link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}">


  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/base.css' %}">
  <link rel="stylesheet" href="{% static 'css/price.css' %}">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <script>
    $(document).ready(function() {

      $('#sidebarCollapse').on('click', function() {
        $('#sidebar').toggleClass('active');
      });

    });
  </script>
</head>

<body>

  <!--MENU SUPERIOR-->
  <!-- Fixed navbar -->
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark" style="height: 70px;">
    <a class="navbar-brand" href="#">Fixed navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>


        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            More
          </a>


          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="/support/">Support and Consulting</a>
            <a class="dropdown-item" href="/test-driven-development/">What is Test-Driven Development?</a>
            <a class="dropdown-item" href="/testimonials/">Testimonials</a>
          </div>
        </li>


      </ul>
      <form class="form-inline ml-auto">
        <a href="{% url 'account_login' %}" class="btn btn-outline-secondary">Log in</a>
        <a href="{% url 'account_signup' %}" class="btn btn-primary ml-2">Sign up</a>
      </form>
    </div>
  </nav>
  <!-- FIN MENU SUPERIOR-->

  <div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar">
      <div class="sidebar-header">
        <img src="static\images\elim-logo.png" alt="Ministerios Elim" width="50%" height="50%">
        <strong>ELIM</strong>
      </div>

      <ul class="list-unstyled components">
        <li class="">
          <a class="sidebar-link" href="#capitulo1" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
            <i class="fas fa-home"></i> Capítulo 1
          </a>
          <ul class="collapse list-unstyled" id="capitulo1">
            <li>
              <a class="sidebar-link" href="#">Introducción</a>
            </li>
            <li>
              <a class="sidebar-link" href="#">¿Qué es la salvación?</a>
            </li>
            <li>
              <a class="sidebar-link" href="#">¿Se pierde la salvación?</a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>


    <!-- Page Content  -->
    <div id="content">

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">

          <button type="button" id="sidebarCollapse" class="btn btn-info">
              <i class="fas fa-align-left"></i>
              <span>Toggle Sidebar</span>
            </button>
        </div>
      </nav>

      <hr><br>

      <main role="main" class="container">
        <div class="row">
          <div class="col-md-8">
            {% block content %} {% endblock content %}
          </div>
          <div class="col-md-4 float-right" id="LocalSide">

            <form class="search-form" action="/search/" method="post">
              <input type="hidden" name="csrfmiddlewaretoken" value="KTlYgVaxnAYKzLle9WWDNIoE0MDSvAVldfbsnKbfpAStWafCb1MVMgwLdArZUEiP">
              <div class="form-group">
                <input type="search" class="form-control search-course" placeholder="Buscar curso" name="search_term" required="">
                <input type="hidden" value="3" name="course_id">
              </div>
            </form>

            <h2 class="local-side-heading">In this Section:</h2>
            <nav class="local-nav">
              <ol data-local-nav-list=""></ol>
            </nav>


            <a class="pcta" href="/payments/tdd-flask/" data-a-buy-course-cta="tdd-flask">
              <span class="label label-success">

                  <span class="pcta-label">Get the</span>
              <span class="pcta-hook">full course</span>

              <span class="sr-only">for</span>
              <span class="pcta-badge" aria-hidden="true">Now Only</span>
              </span>
              <span class="pcta-price">$30</span>
            </a>



            <a href="#TOP" class="local-side-jump" data-back-to-top="">↑ Back to top</a>
          </div>
        </div>
      </main>


      <footer class="footer">
        <div class="container">
          <span class="text-muted">Footer...</span>
        </div>
      </footer>

    </div>
  </div>
0 голосов
/ 09 мая 2020

Просто удалите приведенное ниже руководство css вы разработали. bcz это отменяет bootstrap по умолчанию css, что не подходит 

.dropdown-toggle::after {
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
0 голосов
/ 09 мая 2020

В вашем коде ".dropdown-toggle :: after" правильное значение является проблемой, замените этот код, он будет работать. 

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...