Question

我正在尝试使用twitter bootstrap开发一个网站。我使用此代码在导航栏中将图像用作徽标

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

笔记本电脑没问题。但对于移动设备和标签，我希望该标识将成为中心。请告诉我，我该怎么做？这是我的网站https://dl.dropboxusercontent.com/u/168659703/project/index.html

Answer 1

.navbar-header {
   margin: 0 auto;
   display: table;
   /* margin-right: 50px; */ remove this or add margin-right: auto !important;
}

http://jsfiddle.net/L64Pa/

Answer 2

.navbar-header
{
  display:block;
  text-align:center;
}

Answer 3

您可以在main.css文件中使用：

执行半“黑客”样式的CSS

@media only screen and (max-device-width: 480px) {
    .navbar-brand {
        float:none !important;
    }
    .img-responsive {
        margin:0 auto !important;
        display:block !important;
    }
}

Answer 4

这是 Bootstrap 4 的更新，因为最初接受的答案现在是一个小提琴。

Bootstrap 4中现在包含的flexbox utils可用于响应性地更改内容的对齐方式。例如，这里的品牌集中在移动设备上：

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

演示：https://www.codeply.com/go/DPyf5WFg99

如何在移动设备的bootstrap中心显示徽标？

4 个答案: