Question

我使用的是Bootstrap，我想：

将汉堡包放在导航栏中心
删除汉堡包周围的盒装轮廓

navbar

目前的汉堡包：

current hamburger

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

＆＃13;

<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>

＆＃13;

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;
}

＆＃13;

编辑：为了澄清，我使用的是Bootstrap 3.3.7。我也用

＆＃13;

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

＆＃13;

仍需要将汉堡包放在导航中心，并（可选）摆脱围绕它的轮廓。仍然寻求帮助＆lt; 3

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

Answer 1

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

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

请参阅此Fiddle

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

----更新----

这是我的看法？ https://jsfiddle.net/DTcHh/35997/

以文字为中心的图片：

中心汉堡包，文字和删除大纲

1 个答案:

----更新----