在引导,什么是最平台友好的方式来创建一个导航栏,有徽标中的左边,在中心菜单项和标志B上的吧?
这是我到目前为止已经试过,它最终被对齐,使标志A是在左边,菜单项旁边的右边的左边和标志B中的标志.
<div class="navbar navbar-fixed-top navbar-custom ">
<div class="container" >
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">Menu Item 1</a></li>
<li><a href="#contact">Menu Item 2</a></li>
<li><a href="#about">Menu Item 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
</ul>
</div>
</div>
</div>
Run Code Online (Sandbox Code Playgroud) 我无法将我的内容集中在引导程序导航栏中.我正在使用bootstrap 3.我读了很多帖子,但是使用的CSS或方法不能用于我的代码!我真的很沮丧,所以这就像我的最后一个选择.任何帮助,将不胜感激!
<!DOCTYPE html>
<html>
<head>
<title>Navigation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/style.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="#">Link</a></li> …Run Code Online (Sandbox Code Playgroud) 我正在尝试实施Bootstrap 3导航栏,以便品牌徽标始终保持在中间位置.这是代码:
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-inner">
<div class="container">
<button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" style="margin: 0; float: none;" href="#">
<img src="/Content/themes/next/images/logo.png" /></a>
<div class="nav-collapse">
<ul class="nav">
<li> <a href="#">Item 1</a></li>
<li> <a href="#">Item 1</a></li>
<li> <a href="#">Item 1</a></li>
</ul>
</div>
<ul class="nav pull-right">
<li>
<a href="#">
<div class="nextCog"></div>
</a>
</li>
</ul>
<span class="navbar-text pull-right">superpup1 </span>
</div>
</div>
</div>Run Code Online (Sandbox Code Playgroud)
它制作了漂亮的导航栏:

但是,我希望徽标(绿色)始终保持在中间位置.我将此样式添加到带有"品牌"类的标记中:
<a class="brand" style="margin: 0; float: …Run Code Online (Sandbox Code Playgroud) 如何将我设置的jsFiddle中的按钮居中,这样按钮的间距相等,并且在导航栏的中心和中心?
我尝试了不同的方法,比如
display:inline-block;margin:0 auto; text-align:center;
Run Code Online (Sandbox Code Playgroud)
但我无法让它发挥作用.
如果您可以提供一些解释,而不是仅仅修复CSS,因为我想学习,所以我不必再继续回到这里.
编辑:
就像他们在这里居中一样^.