响应式Bootstrap Navbar

Question

我正在尝试为我的网站创建一个Navbar,左侧是下拉菜单,中间是图像,右侧是可折叠项目.我使用较少的bootstrap来设置导航栏的样式,但我遇到了麻烦.

我已经搜索了Stack溢出寻找方法来完成这项工作,就像这个问题一样,但那里的解决方案并不适用于我.我似乎无法将我的图像排成一行,以便其水平轴以下拉菜单,可折叠项和导航栏容器为中心.当我尝试上述链接中的解决方案时,通过最大化其位置固定将图像从页面流中取出,它总是出现在导航栏下方.我可以通过搞乱CSS属性来解决这个问题,但是一旦我调整窗口大小,事情就会变得很糟糕.

是否有一种方法(可能使用更少)来设置引导导航栏的样式,这样无论窗口的大小是多少,我左边都有一个项目,中间是图像,右边是项目,所有这些都共享一个共同的水平中心轴与导航栏？

编辑

好吧,所以我改变了主意,决定只在左边添加一些链接,中心还有一个图像,右边有一些链接.当屏幕变小时,我希望链接向右折叠,为菜单提供切换按钮.折叠工作正常,但当链接在屏幕上时,我希望它们在导航栏中与图像一起水平居中.现在,图像部分位于导航栏中,部分位于外部.当链接以较小的屏幕尺寸折叠时,我还希望图像向左滑动.这是我现在的代码:

只是注意我使用django来提供html,因此图像src的语法.

#logo-with-slogan {
  max-width: 35%;
  padding: 3% 0 3% 0;
}

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  margin: auto;
}

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
  </div>
  <a class="navbar-brand" href="#">
    <img id="logo-with-slogan" src="{% static " img/LogoWslogan.jpg " %}" />
  </a>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
      <li><a href="#itemonelink">Item One</a></li>
      <li><a href="#itemtwolink">Item Two</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#signuplink">Signup</a></li>
      <li><a href="#loginlink">Login</a></li>
    </ul>
  </div>
</nav>

Answer 1

所以你想要做这样的事情,配合图像:

HTML

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>    
    </div>
    <a class="navbar-brand navbar-center" href="#">
        <img src="http://placehold.it/100x40" alt="Logo Here">
    </a>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#itemonelink">Item One</a></li>
            <li><a href="#itemtwolink">Item Two</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#signuplink">Signup</a></li>
            <li><a href="#loginlink">Login</a></li>
        </ul>
    </div>
</nav>

CSS

.navbar-brand {
    float: none;
    padding: 5px;
}
.navbar-center {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    height:100%;
}

演示:JSFiddle