Bootstrap 4.1 выравнивание выпадающего меню

Question

Bootstrap 4.1 выравнивание выпадающего меню

Объявление не является тегом HTML; это инструкция для веб-браузера о том, какая версия HTML-страницы написана.

В HTML 4.01 декларация относится к DTD, потому что HTML 4.01 был основан на SGML. DTD определяет правила для языка разметки, чтобы браузеры отображали контент правильно.

1

css twitter-bootstrap

задан kittyKat 16 January 2019 в 12:19

2 ответа

Другие вопросы по тегам:

css twitter-bootstrap

Похожие вопросы:

score 0 · Answer 1

используют position:absolute для этого класса

  .navbar-nav .dropdown-menu {
              position: absolute !important;
            float: none;
      }

@media (min-width: 1380px) {
        .navbar-expand-custom {
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
        }

            .navbar-expand-custom .navbar-nav {
                flex-direction: row;
            }

                .navbar-expand-custom .navbar-nav .nav-link {
                    padding-right: .5rem;
                    padding-left: .5rem;
                }

            .navbar-expand-custom .navbar-collapse {
                display: flex !important;
            }

            .navbar-expand-custom .navbar-toggler {
                display: none;
            }
            
             .navbar-nav .dropdown-menu {
              position: absolute !important;
            float: none;
      }
    }

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<nav class="navbar navbar-expand-custom bg-dark navbar-dark">
        <a class="navbar-brand" href="landingPage(Stu).aspx">
            Trip Management System
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTrips" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fas fa-globe" style="margin: 0px 3px 0px 3px"></i>Trips
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuTrips">
                        <a class="dropdown-item" href="tripRegistration.aspx">Apply For Trip</a>
                        <a class="dropdown-item" href="viewtrips.aspx">View Trips</a>
                        <a class="dropdown-item" href="viewReviewList.aspx">List of Reviews</a>
                    </div>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="tripApplicationList.aspx"><i class="fab fa-wpforms" style="margin: 0px 3px 0px 3px"></i>Application Status</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="viewWeather.aspx"><i class="fas fa-sun" style="margin: 0px 3px 0px 3px"></i>Weather</a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="viewAnnouncement.aspx"><i class="fas fa-bullhorn" style="margin: 0px 3px 0px 3px"></i>Announcements</a>
                </li>

                <li class="nav-item dropdown" style="position: absolute; right: 80px;">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <asp:Label ID="Labelusername" runat="server"></asp:Label>
                        &nbsp;</a><div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <a class="dropdown-item" href="EditProfileStudent.aspx">Edit Profile</a>
                            <a class="dropdown-item" href="profilePage.aspx">View Profile</a>
                            <a class="dropdown-item" href="calendar.aspx">Trip Calendar</a>
                            <a class="dropdown-item" href="viewTripHistory.aspx">View Trip History</a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="signout.aspx">Sign out</a>
                        </div>
                </li>
            </ul>
        </div>
    </nav>

score 0 · Answer 2

это произошло из-за неправильной записи. Расширить класс navbar-expand-custom Класс не существует в начальной загрузке 4, поэтому он создает проблему.

, поэтому я изменяю navbar-expand-custom на navbar-expand-lg, поэтому, когда экран меньше, чем 992px, отображается меню бургера.

@media (min-width: 1380px) {
  .navbar-expand-custom {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-custom .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-custom .navbar-nav .nav-link {
    padding-right: .5rem;
    padding-left: .5rem;
  }

  .navbar-expand-custom .navbar-collapse {
    display: flex !important;
  }

  .navbar-expand-custom .navbar-toggler {
    display: none;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <a class="navbar-brand" href="landingPage(Stu).aspx">
    Trip Management System
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTrips" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-globe" style="margin: 0px 3px 0px 3px"></i>Trips
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuTrips">
          <a class="dropdown-item" href="tripRegistration.aspx">Apply For Trip</a>
          <a class="dropdown-item" href="viewtrips.aspx">View Trips</a>
          <a class="dropdown-item" href="viewReviewList.aspx">List of Reviews</a>
        </div>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="tripApplicationList.aspx"><i class="fab fa-wpforms" style="margin: 0px 3px 0px 3px"></i>Application Status</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="viewWeather.aspx"><i class="fas fa-sun" style="margin: 0px 3px 0px 3px"></i>Weather</a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="viewAnnouncement.aspx"><i class="fas fa-bullhorn" style="margin: 0px 3px 0px 3px"></i>Announcements</a>
      </li>

      <li class="nav-item dropdown" style="position: absolute; right: 80px;">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <asp:Label ID="Labelusername" runat="server"></asp:Label>
        &nbsp;</a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="EditProfileStudent.aspx">Edit Profile</a>
          <a class="dropdown-item" href="profilePage.aspx">View Profile</a>
          <a class="dropdown-item" href="calendar.aspx">Trip Calendar</a>
          <a class="dropdown-item" href="viewTripHistory.aspx">View Trip History</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="signout.aspx">Sign out</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>