Bootstrap 3 / FlatUI - 中心徽标 - ＆gt;导航链接堆叠？

Question

我在导航栏中添加了一个小徽标，并以响应方式居中。

我的问题是，从那时起，虽然有足够的空间，但右边的导航链接（其中三个）都会折叠堆叠。

我需要适应哪些属性来达到我想要的效果？

Picture http://i58.tinypic.com/2chmef8.png

相关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;
  }
}

FIDDLE - 有点自己解决了这个问题

http://jsfiddle.net/BMS4n/

Answer 1

由于图片无法加载，我无法渲染HTML + CSS。试试display: inline-block

<强> More information