将导航栏菜单对齐到底部中心

时间：2019-12-17 01:18:31

标签： css twitter-bootstrap bootstrap-4

我在网页上有2个菜单，一个菜单需要显示在中间底部，另一个菜单需要显示在右上角。以下代码在同一行中显示了所有这些代码。

这是我要实现的布局。

**********************************************************************************
                                                            Home About User Login
Logo Heading         
                  Link1  Link2  Link3  Link4  Link5
**********************************************************************************

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<style>
   .navbar-nav {
      flex-direction: row;
    }

    .nav-link {
      padding-right: .5rem !important;
      padding-left: .5rem !important;
    }

    /* Fixes dropdown menus placed on the right side */
    .ml-auto .dropdown-menu {
      left: auto !important;
      right: 0px;
    }
   .navbar-nav > li > a 
    {
       padding: 0;
       margin: 0;
      vertical-align: bottom;
    }
  </style>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
             <a class="navbar-brand" href="">
                <img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
            </a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active" ID="link1" runat="server" >
      <a class="nav-link">Link1</a>
    </li>
    <li class="nav-item active" ID="link2" runat="server" >
      <a class="nav-link">Link2</a>
    </li>
    <li class="nav-item active" ID="link3" runat="server" >
      <a class="nav-link">Link3</a>
    </li>
    <li class="nav-item active" ID="link4" runat="server" >
      <a class="nav-link">Link4</a>
    </li>
    <li class="nav-item active" ID="link5" runat="server" >
      <a class="nav-link">Link5</a>
    </li>

  </ul>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a class="nav-link" href="../../page.aspx">Home</a>
    </li>
          <li class="nav-item">
      <a class="nav-link" href="../About.aspx" >About</a>
    </li>
                <li class="nav-item">
      <a class="nav-link" href="../User.aspx">User</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"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Log Out</a>
      </div>
    </li>
  </ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

3 个答案:

答案 0 :(得分：1)

尝试此代码。希望会帮助您。

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

	.nav-link {
		padding-right: .5rem !important;
		padding-left: .5rem !important;
	}

	/* Fixes dropdown menus placed on the right side */
	.ml-auto .dropdown-menu {
		left: auto !important;
		right: 0px;
	}
	.navbar-nav > li > a 
	{
		padding: 0;
		margin: 0;
		vertical-align: bottom;
	}
	.bottom_menu{
		margin-top: 30px;
	}
	.top_menu{
		margin-bottom: 30px;
	}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded justify-content-md-center">
   <a class="navbar-brand" href="">
    <img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
  </a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
  <ul class="bottom_menu navbar-nav ml-auto text-md-center">
    <li class="nav-item active" ID="link1" runat="server" >
      <a class="nav-link">Link1</a>
    </li>
    <li class="nav-item active" ID="link2" runat="server" >
      <a class="nav-link">Link2</a>
    </li>
    <li class="nav-item active" ID="link3" runat="server" >
      <a class="nav-link">Link3</a>
    </li>
    <li class="nav-item active" ID="link4" runat="server" >
      <a class="nav-link">Link4</a>
    </li>
    <li class="nav-item active" ID="link5" runat="server" >
      <a class="nav-link">Link5</a>
    </li>

  </ul>
  <ul class="top_menu navbar-nav ml-auto justify-content-md-center justify-content-start flex-nowrap">
    <li class="nav-item">
      <a class="nav-link" href="../../page.aspx">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="../About.aspx" >About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="../User.aspx">User</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"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Log Out</a>
      </div>
    </li>
  </ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

答案 1 :(得分：1)

您超级亲密！要使它正常工作，您只需要位于底部中心菜单上的mx-auto和mt-auto以及位于右上方菜单上的mb-auto。

注意：这确实会在较小的屏幕上中断，因为我们仍将所有内容都视为列和列进行包裹。但是，如果需要在较小的屏幕上显示，则可以绝对定位右上角的菜单。 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
  .navbar-nav {
    flex-direction: row;
  }
  
  .nav-link {
    padding-right: .5rem !important;
    padding-left: .5rem !important;
  }
  /* Fixes dropdown menus placed on the right side */
  
  .ml-auto .dropdown-menu {
    left: auto !important;
    right: 0px;
  }
  
  .navbar-nav>li>a {
    padding: 0;
    margin: 0;
    vertical-align: bottom;
  }
</style>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
  <a class="navbar-brand" href="">
    <img style="width: 64px;height: 64px;" src="../../Images/new.png">Heading
  </a>
  <ul class="navbar-nav mx-auto mt-auto">
    <li class="nav-item active" ID="link1" runat="server">
      <a class="nav-link">Link1</a>
    </li>
    <li class="nav-item active" ID="link2" runat="server">
      <a class="nav-link">Link2</a>
    </li>
    <li class="nav-item active" ID="link3" runat="server">
      <a class="nav-link">Link3</a>
    </li>
    <li class="nav-item active" ID="link4" runat="server">
      <a class="nav-link">Link4</a>
    </li>
    <li class="nav-item active" ID="link5" runat="server">
      <a class="nav-link">Link5</a>
    </li>

  </ul>
  <ul class="navbar-nav ml-auto mb-auto">
    <li class="nav-item">
      <a class="nav-link" href="../../page.aspx">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="../About.aspx">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="../User.aspx">User</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">
        <asp:Label ID="LogOnUser" runat="server"></asp:Label>
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Log Out</a>
      </div>
    </li>
  </ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

答案 2 :(得分：0)

您是说这样吗？

<style>
  #header{
  position: relative;
  width: 100%;
  height: 100px;
  background-color: orange;
}

a{
  display: inline-block;
  width: 50px;
}

#logo, #navigation, #url{
  position: absolute;
}

#logo{
  top: calc(50%);
}

#navigation{
  top: 0;
  right: 0;
}

#url{
  left: calc(50% - 125px);
  bottom: 0;
}
</style>

<div id = "header">
  <div id = "logo">
    LOGO
  </div>

  <div id = "navigation">
        <a>Home</a>
        <a>About</a>
        <a>User</a>
  </div>

  <div id = "url">
    <a>Link1</a>
    <a>Link2</a>
    <a>Link3</a>
    <a>Link4</a>
    <a>Link5</a>
  </div>
</div>

相关问题
最新问题