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.标识后面的文字必须为2行，两行之间的空格应小 3.其他三张图片应在右侧 4.导航栏的宽度应为窗口 5.导航栏上的内容最大宽度应为976px 6.导航栏的高度应为51px 7.文本大小应为8pt

当屏幕尺寸低于410px时，应稍微更改这些设置。这是必要的，因为在410px以下内容不能适应空间，所以如果导航栏只有39px，并且图像将根据这个高度调整大小，而不是一切都适合。

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，它确实很好，没有任何改造。

Bootstrap导航栏内容定位

1 个答案: