以手机为中心的Bootstrap导航栏品牌
Bootstrap nav-bar brand centered on mobile
我想制作一个响应网页,对于导航栏,我使用了Bootstrap,我对品牌设置有一些问题。我应该怎么做才能让导航栏品牌在桌面的左边和手机的中间?我已经做了一个导航栏。
这是我的html代码。
<body id="mypage" data-spy="scroll" data-target=".navbar" data-offset="50" style="background-color:bisque">
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost:59842/NNC.html">
logo
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:black">
yes<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">hello</a></li>
<li><a href="#">hello</a></li>
<li><a href="#">hello</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:black">
no<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">yes</a></li>
<li><a href="#">yes</a></li>
<li><a href="#">yes</a></li>
</ul>
</li>
</ul>
</div>
</nav>
试试这个:
@media screen and (max-width: 766px) {
nav a.navbar-brand{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
@media screen and (max-width: 766px) {
nav a.navbar-brand{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container-fluid navbar-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://localhost:59842/NNC.html">
logo
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:black">
yes<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">hello</a></li>
<li><a href="#">hello</a></li>
<li><a href="#">hello</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style="background-color:black">
no<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">yes</a></li>
<li><a href="#">yes</a></li>
<li><a href="#">yes</a></li>
</ul>
</li>
</ul>
</div>
</nav>
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 如何使用jquery强制一个单词更改大小写等以保留品牌
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- MVC 3页面导航和使用javascript传递参数
- 如何在react js中从一个页面导航到另一个页面
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 正在检测导航到<a name=“;最新主题”></a>
- 带有url的单页网站导航
- 以手机为中心的Bootstrap导航栏品牌
- 响应式导航栏不起作用,品牌变得一团糟
- 如何在导航栏上重新定位品牌形象
- 引导导航条使品牌和导航条正确粘贴;网页的侧边
- 引导4:当导航条折叠时,li项水平显示在导航条品牌旁边
- 当点击导航栏品牌时关闭引导折叠菜单
- Bootstrap导航条品牌不能将文本放在两行上并具有响应性