Question

需要帮助解决这个问题，如何在导航链接之间插入品牌标识？以及如何在品牌徽标附近移动链接，如image.。而且我需要对作品做出响应。 Here is code.

        <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand navbar-brand-centered">Logo</div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </div>
    </nav>

Answer 1

也许这就是你要找的东西。

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar navbar-inner">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
                <ul class="nav navbar-nav">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <div class="navbar-brand navbar-brand-centered">Logo</div>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

更改bootstrap CSS：

.navbar-nav > li {
  float: none;
  display: inline-block;
}
.navbar-inner {
  text-align:center;
}

Answer 2

由于 https://jsfiddle.net/phg350de/4/

HTML：

table

CSS：

        <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-brand-centered">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="navbar-brand navbar-brand-centered">Logo</div>
            </div>
            <div class="collapse navbar-collapse" id="navbar-brand-centered">
      <div class="row">
        <div class="col-xs-0 col-sm-3 col-md-3">
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6">
          <ul class="nav navbar-nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
          </ul>
        </div>
        <div class="col-xs-0 col-sm-3 col-md-3">
        </div>
      </div>
            </div>
        </div>
    </nav>

链接之间的Bootstrap品牌标志

2 个答案: