Bootstrap 4.1导航栏下拉对齐

时间：2019-01-16 12:08:51

标签： css twitter-bootstrap

我正在使用Bootstrap 4.1，并且一切正常，直到我为navbar添加媒体查询为止。我假设我没有在媒体查询中添加下拉列表，但是我不确定这是否是原因。

Navbar image for 1st ddl

Navbar image for 2nd ddl

I want the ddl to be like this

HTML 

<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>

CSS 

@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;
    }
}

摘要以进行实时预览

@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-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>

<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>

有人知道如何解决此问题吗？

先谢谢了。

2 个答案:

答案 0 :(得分：0)

为此课程使用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>

答案 1 :(得分：0)

它的发生是因为您写错了扩展类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>

相关问题
最新问题