html - 中心汉堡包、文本和删除轮廓

Question

我正在使用 Bootstrap，我想:

1. 在导航栏中将汉堡包居中
2. 去掉汉堡周围的框线

当前汉堡包:

这是我的代码。我也从这里尝试了一些解决方案，但仍然无法正常工作。

<nav class="navbar navbar-inverse navbar-static-top">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMenu">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="nav navbar-nav">
        <li><a class="navtext" href="#">TEST 1</a></li>
        <li><a class="navtext" href="#">TEST 2</a></li>
        <li><a class="navtext" href="#">TEST 3</a></li>
        <li><a class="navtext" href="#">TEST 4</a></li>
      </ul>
	</div>
</nav>

html {
	background-color: black;
}
.navbar {
	background-color: black;
	color: black;
	margin-bottom: 0!important;
}
.icon-bar {
	color: #FFFFFF;
}
button {
	color: #FFFFFF;
	outline: none;
	border:0px;
}
.navbar-header{
	background-color: black;
	color: black;
	border: 0px;
}
.navbar-inverse {
	background-color: black;
	color: black;
}
#navMenu {
	color: black;
	background-color: black;
}
.container-fluid {
	color: black;
	background-color: black;
}
li {
	color: #ffffff;
	text-align: center;

}
.navbar-toggle {
  border: none;
  outline: none;
  float: none;
  margin-right:0;
}
a.navtext {
    color: #ffffff;
	border: 3px solid #000000;
	width: 100px auto;
	font-family: 'Montserrat', sans-serif;
	text-decoration: none;
	position: relative;
}
a.navtext:hover {
    border: 3px solid #F22613!important;
    background: #F22613!important;
}
a.navtext:before {
  	content: "";
  	position: absolute;
  	width: 100%;
  	height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
a.navtext:hover:before {
	visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
ul.nav {
	text-align: center!important;
}

编辑:澄清一下，我使用的是 Bootstrap 3.3.7。我还用

解决了居中文本问题

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

仍然需要将汉堡包置于导航中心并(可选)去掉它周围的轮廓。仍在寻求帮助<3

我试过切换到 3.0.0，但一切都搞砸了 :(

Answer 1

您唯一缺少的是导航栏标题上的文本中心。

 <div class="navbar-header text-center">

查看此 Fiddle

看起来汉堡周围的边框已经用你的 CSS 消失了

---

----更新----

这就是我的样子？ https://jsfiddle.net/DTcHh/35997/

图片居中: