Question

最近学习Bootstrap（和一般的前端东西）并且遇到了一个特定的问题。我有一个导航栏，可以在整个页面宽度上进行缩放，并在左侧对齐徽标，然后在右侧浮动列表中跟踪5个项目。只要响应性不起作用就行得很好。当输入一定的最小/最大宽度时显示的一般行为 - 将列表项排列在彼此之下 - 是很好的，但是，正确的浮动在某个地方丢失了之路。浏览bootstrap-responsive.css时，我无法找到导致此行为的行。有没有人知道我应该从哪里开始看？

<div class="navbar">
    <div class="navbar-inner">
        <a class="brand" href="#"><img src="img/logo.png" alt="horizontal-ad"></a>
        <ul class="nav" style="float: right;">
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
        </ul>
    </div>
</div>

除了无序列表的内联样式之外，我覆盖的唯一规则是来自主bootstrap.css的.navbar-inner来调整着色。

问候！

:: edit：我刚刚意识到这与bootstrap-responsive.css无关，因为我删除了它但行为仍然相同。但是，问题仍然存在。 ::

Answer 1

HTML

<ul class="nav" id="nav_ul">

CSS

#nav_ul{
float:right!important;
}

Answer 2

尝试Bootstrap helper class pull-right：

<ul class="nav pull-right">

或尝试在块中显示：

 <ul style="display:block" class="nav pull-right">

Answer 3

试试这个

<div class="navbar">
    <div class="navbar-inner clearfix">
        <a class="brand pull-left" href="#"><img src="img/logo.png" alt="horizontal-ad"></a>
        <ul class="nav pull-right">
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
            <li><img src="img/ad/adhorizontal.jpg" alt="horizontal-ad"></li>
        </ul>
    </div>
</div>

Answer 4

尝试使用：

float: right!important;
clear: right;
text-align: right;

另外如果屏幕太小则将它保持在同一条线上它会消失所以在移动设备上无法正常使用这行css：

white-space: nowrap;

http://jsfiddle.net/hive7/b9cgn/4

Bootstrap 2.3响应Navbar对齐

4 个答案: