html - 我正在尝试在 .navbar-collapse 周围设置边框，但似乎无法实现

Question

我正在尝试在针对移动尺寸显示的下拉菜单周围添加边框。以为可以通过 .navbar-collapse 来控制，但似乎不起作用。有什么想法吗？

手机尺寸示例图片:

我的代码如下:

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">I am fouridine</a>
            </li>
            <li><a href="#about">design</a>
            </li>
            <li><a href="#contact">animation</a>
            </li>
            <li><a href="#">other art</a>
            </li>
            <li><a href="#">contact</a>
            </li>
        </ul>
        </ul>
    </div>
    <!--/.nav-collapse -->
</nav>

导航的 CSS 是这样的:

@media (min-width: 768px) {
    .navbar {
        display: none;
    }
}
.navbar {
    min-height:0;
}
.navbar-nav {
    margin:0;
}
.navbar-default {
    background-color:#47c4c0;
    border:0;
    height:30px;
    font-size: 16px;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin:0;
    border:0 30px 30px 30px;
}
.nav > li > a {
    padding: 5px 20px 5px 20px;
}
.navbar-default .navbar-nav > li > a {
    color: #47c4c0;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    color: #666666;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: white;
    background-color: #47c4c0;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border:0;
}
.navbar-collapse {
    padding:0;
    background:white;
    border-style:solid;
    border-color:#47c4c;
    border:0 30px 30px 30px;
}
.navbar-toggle {
    padding: 8px;
    margin: 0;
    border:0;
    border-radius: 0;
}
.navbar-toggle .icon-bar {
    width: 15px;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: white;
}
.navbar-default .navbar-toggle:hover .icon-bar, .navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #47c4c0;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
    background-color: white;
}

Answer 1

您可以将其应用于 navbar-nav 类。另见 MDN:border-width

@media (max-width: 767px) {
    .navbar.navbar-default .navbar-nav {
      background-color: white;
      border: none;
      margin-top: 0px;
      border: solid #47c4c0;
      border-width: 0 30px 30px;
    }
}

查看工作代码段。

@media (min-width: 768px) {
  .navbar.navbar-default {
    display: none;
  }
}
.navbar.navbar-default {
  min-height: 0;
  background-color: #fff;
  border: 0;
  height: 30px;
  font-size: 16px;
}
.navbar.navbar-default .navbar-nav > li > a {
  padding: 5px 20px;
  color: #47c4c0;
}
.navbar.navbar-default .navbar-nav > li > a:hover,
.navbar.navbar-default .navbar-nav > li > a:focus {
  color: #666666;
}
.navbar.navbar-default .navbar-nav > .active > a,
.navbar.navbar-default .navbar-nav > .active > a:hover,
.navbar.navbar-default .navbar-nav > .active > a:focus {
  color: white;
  background-color: #47c4c0;
}
.navbar.navbar-default .navbar-collapse,
.navbar.navbar-default .navbar-form {
  border: none;
}
@media (max-width: 767px) {
  .navbar.navbar-default {
    background-color: #47c4c0;
  }
  .navbar.navbar-default .navbar-toggle {
    padding: 8px;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .navbar.navbar-default .navbar-toggle .icon-bar {
    width: 15px;
    background-color: white;
  }
  .navbar.navbar-default .navbar-toggle:hover .icon-bar,
  .navbar.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #47c4c0;
  }
  .navbar.navbar-default .navbar-toggle:hover,
  .navbar.navbar-default .navbar-toggle:focus {
    background-color: white;
  }
  .navbar.navbar-default .navbar-nav {
    background-color: white;
    border: none;
    margin-top: 0px;
    border: solid #47c4c0;
    border-width: 0 30px 30px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>
  </div>
  <div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">I am fouridine</a>

      </li>
      <li><a href="#about">design</a>

      </li>
      <li><a href="#contact">animation</a>

      </li>
      <li><a href="#">other art</a>

      </li>
      <li><a href="#">contact</a>

      </li>
    </ul>
    </ul>
  </div>
</nav>