javascript - Bootstrap : Stylize Border Lines in Navbar Menu

Question

我一直在为我的网站定制标题。我在两件事上遇到了麻烦。

1) 当浏览器缩小时，搜索图标的顶部和底部有边框线。我想细化底线并删除顶线。

2) 我想在浏览器缩小时在登录/注册之间添加更多间距。当浏览器切换到汉堡包图标时是否可以删除注册？

提前感谢您的帮助。

document.addEventListener("touchstart", function() {}, true);

body {
  background-color: #e2e2e2;
}
.navbar {
  background: #00ad97;
  background: -moz-linear-gradient(#24c494, #00ad97);
  background: -o-linear-gradient(#00ad97, #00ad97);
  background: -webkit-linear-gradient(#4a4a4a, #414042);
}
/*--------------
search button top start
--------------*/

.search-box {
  transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: none;
  cursor: pointer;
  background: white;
}
.search-box + label .icon-search {
  color: black;
}
.search-box:hover {
  color: white;
  background: #ebebeb;
  box-shadow: 0 0 0 5px #3d4752;
}
.search-box:hover + label .icon-search {
  color: white;
}
.search-box:focus {
  transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;
  border: none;
  outline: none;
  box-shadow: none;
  padding-left: 15px;
  cursor: text;
  width: 150px;
  border-radius: auto;
  background: white;
  color: black;
}
.search-box:focus + label .icon-search {
  color: black;
}
.search-box:not(:focus) {
  text-indent: -5000px;
}
#search-submit {
  position: absolute;
  display: none;
}
.icon-search {
  position: relative;
  left: -2.2em;
  top: .42em;
  color: white;
  cursor: pointer;
}
/*--------------
search button top END
--------------*/

/* Header Logo */

.navbar-brand {
  font-family: Nivo;
  font-size: 2em;
  letter-spacing: .5px;
  color: #fff !important;
  padding-top: 16px;
}
.navbar-brand:hover {
  transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  -moz-transition: 0.25s;
  -webkit-transition: 0.25s;
  color: #c4c4c4 !important;
}
/* Header Sign In */

.sign_in {
  font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
  font-weight: 200;
  letter-spacing: .5px;
  padding-right: 15px;
  font-size: small;
  text-decoration: none;
  color: #fff !important;
}
.sign_in:hover {
  transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  -moz-transition: 0.25s;
  -webkit-transition: 0.25s;
  color: #c4c4c4 !important;
  text-decoration: none;
}
.sign_in:focus {
  text-decoration: none;
}
/* Header Sign Up */

.sign_up {
  font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
  font-weight: 200;
  font-size: small;
  letter-spacing: .5px;
  padding-right: 12px;
  text-decoration: none;
  color: #fff !important;
}
.sign_up:hover {
  transition: 0.25s;
  -o-transition: 0.25s;
  -ms-transition: 0.25s;
  -moz-transition: 0.25s;
  -webkit-transition: 0.25s;
  color: #c4c4c4 !important;
  text-decoration: none;
}
.sign_up:focus {
  text-decoration: none;
}
.menu-ul {
  padding: 0;
}

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <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>
      <a class="navbar-brand" href="/">Resonance Inn</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="menu-ul">
        <form class="navbar-form navbar-right" action="#">
          <input id="search-box" type="text" class="search-box" name="q" />
          <label for="search-box"><span class="glyphicon glyphicon-search icon-search"></span>
          </label>
          <input type="submit" id="search-submit" />
        </form>

        <li style="list-style-type: none;">
          <a class="navbar-text navbar-right sign_in" href="#">Sign In
                    </a>
        </li>
        <li style="list-style-type: none;">
          <a class="navbar-text navbar-right sign_up" href="#">Sign Up
                    </a>
        </li>
      </ul>
    </div>
    <!--/.navbar-collapse -->
  </div>
</nav>

Answer 1

第一个问题:

CSS

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border:none !important;  // adjust as you want (border-top or other)
}

.navbar-form {
    box-shadow: none !important;
}

DEMO HERE

对于第二个问题:

您可以使用 Bootstrap 类来隐藏元素:

.hidden-xs 
.hidden-sm 
.hidden-md
.hidden-lg

LINK