Question

我有这个非常大的引导程序NavBar，我有2个徽标，我想要玩的那个，是下面代码中的注释中的一个，我想要的就是将徽标置于中心，并使其保持在任何分辨率的中心并且不使用col-offset类。

我一直试图以多种方式做到这一点，但根据我的使用情况，我无法得到任何东西。所以我希望你给我一些建议。

这就是我到目前为止的方式

enter image description here

<nav class="navbar navbar-default navbar-fixed-top capilleira-navbar ng-cloak"
     role="navigation"
     ng-controller="MenuController">

  <!-- this is the LOGO I want to center -->      

  <div class="row" ng-show="!displayLogout">
    <div class="col-md-12">
      <a class="navbar-brand text-center" href="#/lines">
        <img src="/images/logos/logo.png" alt="Click N' Gamble Logo">
      </a>
    </div>
  </div>

  <!-- ********************************* --> 

  <div class="container"
       ng-show="displayLogout">
    <div class="navbar-header">
      <button type="button"
              class="navbar-toggle"
              data-toggle="collapse"
              data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#/lines"><img src="/images/logos/logo.png" alt="Click N' Gamble Logo"></a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a class="hover-nieve" href="#/lines">Sports <span class="sr-only">(current)</span></a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Poker</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Casino</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Horses</a></li>
        <li><a class="hover-nieve" href="javascript:void(0);">Info</a></li>
      </ul>
      <div class="navbar-form navbar-right">
        <div class="form-group">
          <input id="search-box"
                 ng-change="broadcastSearchBar()"
                 ng-model="search" class="search-box"
                 placeholder="Search lines..."
                 type="search">
          <label for="search-box">
            <span class="glyphicon glyphicon-search search-icon navbar-icon"
                  ng-show="!search.length">
            </span>
            <span class="glyphicon glyphicon-remove blue-icon"
                  ng-show="search.length"
                  ng-click="search = ''; broadcastSearchBar()">
            </span>
          </label>
        </div>
        <div class="form-group">
          <div class="sideborders"></div>
          <button type="button" class="btn btn-blue"
                  title="Account Figures" data-placement="bottom"
                  data-template="views/accFiguresModal.html"
                  data-animation="fx-bounce-down" ng-controller="AccountFiguresCtrl"
                  ng-click="displayAccountFigures();" bs-popover=""
                  data-auto-close="true">Account Figures
          </button>
          <button type="button" class="btn btn-red" title="Are you sure?"
                  data-placement="bottom" data-template="views/logoutModal.html"
                  data-animation="fx-bounce-down" data-auto-close="1"
                  bs-popover="">Log out
            <i class="fa fa-sign-out fa-lg"></i>
          </button>
        </div>
      </div>
    </div>
  </div><!--/.navbar-collapse -->
</nav>

Answer 1

只需在徽标顶部添加不同的ID，然后修改css中的float和margin即可。这是一个jsfiddle，向您展示我在说什么：http://jsfiddle.net/shdd611y/1/

在bootstrap导航栏中居中徽标

1 个答案: