Bootstrap 3/FlatUI -以徽标为中心的->导航链接堆叠？

Question

我已经为导航栏添加了一个小徽标，并相应地将其居中。

我的问题是，从那时起，正确的导航链接(其中三个)都会折叠起来堆叠起来，尽管有足够的空间。

我需要调整什么属性才能达到预期的效果？

​

​

相关HTML

<header class="header-11">
                <div class="container">
                    <div class="row">
                        <div class="navbar col-sm-12" role="navigation">
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle"></button>
                                <a class="brand" href="#"><!-- <img src="img/logo@2x.png" width="50" height="50" alt="">  -->GRATIS-VERSAND <br> <div id="pete">INNERHALB DEUTSCHLANDS</div></a>
                            </div>
                            <img src="img/nicetights.PNG" class="ri"></div>
                            <div class="collapse navbar-collapse pull-right">
                                <ul class="nav pull-left">
                                    <!-- <li class="active"><a href="#">HOME</a></li> -->
                                    <li><a href="#">KAUFEN </a></li>
                                    <li><a href="#">&Uuml;BER </a></li>
                                    <li><a href="#">WARENKORB</a></li>
                                </ul>
                                <!-- <form class="navbar-form pull-left">
                                    <a class="btn btn-primary" href="#">SIGN IN</a>
                                </form> -->
                            </div>
                        </div>
                    </div>
                </div>
            </header>

相关CSS

img.ri
{
  position: absolute;
  max-width: 80%;
  top: 10%;
  left: 10%;
  border-radius: 0px;
  z-index: 1000;
  display: inline-block;
  /*box-shadow: 0 3px 6px rgba(0,0,0,0.9);*/
}

img.ri:empty
{
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media screen and (orientation: portrait) {
  img.ri {
      max-width: 50%;
  }
}

@media screen and (orientation: landscape) {
  img.ri {
      max-height: 90%;
  }
}
.logoss {
  background: #ffffff;
  padding-top: 10px;
  padding-bottom: 10px;
}
@media (max-width: 767px) {
  .logoss {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
.logoss > .container {
  display: table;
  border: 2px solid grey;
}
.logoss > .container > div {
  display: table-cell;
  text-align: center;
}
@media (max-width: 480px) {
  .logoss {
    display: none;
  }
}

小提琴--我自己解决了这个问题

http://jsfiddle.net/BMS4n/

Answer 1

我不能得到HTML + CSS来渲染，因为图像没有加载。试试display: inline-block