高度为 60 像素和全高边框的响应式菜单答案

【问题标题】：responsive menu with height 60px and full height borders高度为 60 像素和全高边框的响应式菜单
【发布时间】：2018-03-27 14:40:02
【问题描述】：

我希望有一个菜单，在导航栏下方有一个 1 像素的灰色边框，在导航项周围和徽标右侧也有灰色边框。橙色区域为内容区域，如：

我正在使用 bootstrap 4 响应式菜单。但我希望菜单占据 60px 的高度，并且具有全高的边框。 “徽标”右侧的全高边框，然后是导航项周围的全高边框。但它不能正常工作，我得到这个：https://jsfiddle.net/xxub3zvp/1/。

菜单项的边框和徽标右侧的边框没有占据整个高度。菜单的灰色边框底部也没有占据整个宽度。

HTML：

<div class="container-fluid px-0 py-0">
  <nav class="navbar navbar-expand-md navbar-light">
    <a class="logo font-weight-bold text-primary" href="#">Logo</a>
    <button class="navbar-toggler mr-3" type="button" data-toggle="collapse" data-target="#main_nav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="menu_container">
      <div class="collapse navbar-collapse" id="main_nav">
        <ul class="navbar-nav ml-auto d-flex align-items-lg-center">
          <li class="nav-item">
            <a class="nav-link" href="#">Item 0</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Item 1</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="userDropdown"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="
                                                                                                                                       false">
              <i class="fa fa-user" aria-hidden="true"></i> Jan
            </a>
            <div class="dropdown-menu" aria-labelledby="userDropdown">
              <a class="dropdown-item text-gray" href="#">i1</a>
              <a class="dropdown-item text-gray" href="#">i2</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

<section style="background-color:orange;">
  content
</section>

css:

.menu_container {
  position: relative;
  width: 100%;
  border-bottom:1px solid gray;
  height:60px;
}

div.dropdown-menu {
  left: auto;
  right: 0;
}

.nav-item {
  border-left: 1px solid gray;
  padding: 0.3rem 0.75rem;
}
.navbar{
  border-right: 1px solid gray;
}
.logo{
  border-right:1px solid gray;
  padding: 0 1rem;
  height: 45px;
  line-height: 45px;
}

.dropdown-menu {
  border-radius: 0;
  border-top: 0;
  border-left: 1px solid gray;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
}
.navbar {
  padding:0;
}

【问题讨论】：

下拉菜单在您的 Fiddle 中不起作用。
谢谢，我用 js 文件来更新问题。

标签： css twitter-bootstrap

【解决方案1】：

使用以下 css 更新/添加您的 css

.nav-item {

  border-left: 1px solid gray;
  padding: 0 0.75rem;
  line-height: 60px;

}

.logo {

   border-right:1px solid gray;
   padding: 0 1rem;
   line-height: 60px;

}

.nav-链接 {

   padding: 0 1rem;

}

https://jsfiddle.net/xxub3zvp/4/

【讨论】：