[英]How to display logo in center at boostrap for mobile device?
I am trying to develop a website using twitter bootstrap.我正在尝试使用 twitter bootstrap 开发一个网站。 I use a image as logo in navbar using this code
我使用此代码在导航栏中使用图像作为徽标
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class="img-responsive" src="images/bradley.png" alt="" /></a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="home current-page"><a href="index.html">Swap</a></li>
<li class="episodes"><a href="tales.html">Tales</a></li>
<li class="about"><a href="about.html">About</a></li>
<li class="contact"><a href="contact.html">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
It is ok for laptop.笔记本电脑没问题。 But for mobile device and tab i want that logo will be center.
但是对于移动设备和标签,我希望该徽标位于中心。 Please tell me How can i do that?
请告诉我我该怎么做? This is my site https://dl.dropboxusercontent.com/u/168659703/project/index.html
这是我的网站https://dl.dropboxusercontent.com/u/168659703/project/index.html
.navbar-header {
margin: 0 auto;
display: table;
/* margin-right: 50px; */ remove this or add margin-right: auto !important;
}
Here's an update for Bootstrap 4 since the original accepted answer is now a broken fiddle.这是Bootstrap 4的更新,因为最初接受的答案现在是一个坏掉的小提琴。
The flexbox utils that are now included in Bootstrap 4 can be used to responsively change the alignment of content.现在包含在 Bootstrap 4 中的 flexbox 实用程序可用于响应性地更改内容的对齐方式。 For example, here the brand is centered on mobile:
例如,这里的品牌以移动为中心:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block"><!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand mx-0" href="#">
Brand
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ml-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
</ul>
</div>
</nav>
Demo: https://codeply.com/go/DPyf5WFg99演示: https : //codeply.com/go/DPyf5WFg99
.navbar-header
{
display:block;
text-align:center;
}
You could do a semi "hack" style CSS in your main.css file with:你可以在你的 main.css 文件中做一个半“hack”样式的 CSS:
@media only screen and (max-device-width: 480px) {
.navbar-brand {
float:none !important;
}
.img-responsive {
margin:0 auto !important;
display:block !important;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.