Bootstrap 导航栏内容定位

Question

这是我的 HTML：

<div class="navbar navbxar-inverse navbar-fixed-bottom" role="navigation" style="min-width: 320px; height: 51px;">
    <div class="container-fluid" style="display: table;">
        <div class="row row-mod">
            <div class="col-xs-7 col-xs-7-mod" style="background-color: blue;">
                <a class="navbar-logo pull-left" href="/"><img class="img-responsive" src="http://s24.postimg.org/intj0mv3l/logo.jpg" /></a>
                <span class="navbar-footer-text-container">
                    <span class="navbar-footer-text">CUSTOMER SERVICES | <a href="/stores.html" class="store-text">STORE</a> </br>COPYRIGHT © BRND 2006/2014</span>
                </span>
            </div>
            <div class="col-xs-5 col-xs-5-mod" style="padding-right: auto; background-color: red;">
                <a href="/"><img style="margin-left: 1px;" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" /></a>
                <a href="/"><img style="margin-left: 1px;" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" /></a>
                <a href="/"><img class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" /></a>
            </div>
        </div>
    </div>
</div>

我的 CSS 已添加到 JSFiddle。

目前的问题是：
1.较大的黄色图像在蓝色div中没有​​垂直居中，它在div的底部
2.较小的黄色图像在红色div中没有​​垂直居中，它们在div的顶部
3.较小的黄色图像不在红色div的右侧。有一点空间，我找不到为什么会出现这个空间
4.黄色图像设置为响应式。我已经设置了这个，因为我还设置了一个规则来调整 410px 以下的导航栏的大小，使其只有 39px 的高度。这个功能是必要的，因为在较小的屏幕上，文本不必转到下一行，所以一切都适合在更大的屏幕上。问题是它目前无法正常工作。

你对这些问题有什么线索吗？

---

编辑： 我想实现以下布局：
1. 较大的图像（徽标）和文字应在左侧
2. logo后面的文字必须是2行，并且两行之间的间距要小
3.其他三张图片应该在右边 4.导航栏应该有一个宽度作为窗口 5.导航栏上的内容最大宽度为976px 6.导航栏高度为51px 7. 文字大小为 8pt

当屏幕尺寸低于 410 像素时，应稍微更改这些设置。这是必要的，因为在 410 像素以下内容无法容纳在空间中，所以如果导航栏只有 39 像素，并且图像将根据此高度调整大小，超出一切都可以容纳。

Answer 1

主要问题是您将内联样式和外部样式混合在一起，非常混乱。在那个混乱中，你有一个带有display:table 声明的底部导航。基本上，您正在尝试重新发明轮子。我不知道你为什么要这样做，但是按照你的逻辑，我已经修复了你的代码，所以它可以工作。请参阅下面的 fiddle 和 HTML 代码。

<div class="navbar navbxar-inverse navbar-fixed-bottom navbar-bottom" role="navigation">
        <div class="container-fluid" style="display: table; padding:0; margin:0 auto">
        <div class="row row-mod">
            <div class="col-xs-7 col-xs-7-mod" style="background-color: blue; ">
                <a class="navbar-logo pull-left" href="/"><img class="img-responsive" style="margin-left: 1px; margin-top:-9px; display:inline; vertical-align:50%; height:47px;" src="http://s24.postimg.org/intj0mv3l/logo.jpg" /></a>
                <span class="navbar-footer-text-container">
                    <span class="navbar-footer-text">CUSTOMER SERVICES | <a href="/stores.html" class="store-text">STORE</a> </br>COPYRIGHT © BRND 2006/2014</span>
                </span>
            </div>
            <div class="col-xs-5 col-xs-5-mod" style="padding-right: auto; background-color: red; ">
                <img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
                <img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
                <img style="margin-left: 1px; margin-top:9px" class="pull-right img-responsive" src="http://s4.postimg.org/kus2gqabd/image.jpg" />
            </div>
        </div>
    </div>

现在，我的建议是让您按原样使用 Bootstrap，它确实可以正常工作，无需任何重新发明。