无法使用class = pull-right或float:right浮动twitter bootstrap导航栏项目
我正在使用Twitter引导程序和Rails,我似乎无法将导航栏项目浮动到右侧。
我试过用这样的东西:
"Edit account"%>
……但链接保持不变,萤火虫显示"float:left;"
所以我试图在bootstrap_and_overrides.css.less
和home.html.erb
覆盖css float,但都没有奏效。 Firebug表示它找到了两个css float语句,但选择了bootstrap选项。 所以我被困住了,想知道如何自定义导航栏。 我可能在这里做错了,但我只是看不到它。
这是我的代码:
application.html.erb:
... removed to shorten the length of this post
_navigation.html.erb:
bootstrap_and_overrides.css.less:
@import "twitter/bootstrap/bootstrap"; body { padding-top: 60px; } @import "twitter/bootstrap/responsive"; // Set the correct sprite paths // ...REMOVED to shorten the length of this post // Your custom LESS stylesheets goes here // // Since bootstrap was imported above you have access to its mixins which // you may use and inherit here // // If you'd like to override bootstrap's own variables, you can do so here as well // See http://twitter.github.com/bootstrap/less.html for their names and documentation // // Example: // @linkColor: #ff0000; .whoami { float:right; }
当我加载页面时,我看到了导航栏,但最后一项没有浮动到右侧。
看起来像这样:
此处还有另一个屏幕截图,显示了更多信息 。
正如你所看到的,firebug找到了一个"float:right;"
选项,但表示"float:left;"
相反使用了选项。
我在这里理解上有差距,但我不知道在哪里。
请回复:
- 使用pull-right和twitter bootstrap导航栏格式
- 覆盖css
-
解释萤火虫输出
编辑:我在这里发布了我的第一个jsfiddle: http : //jsfiddle.net/uCHQs/2/它表示浏览器’show source’的复制/粘贴,我收集的是相关的css加载并由rails提供服务。
提前致谢!
得到它了。
要使其工作,需要使用多个无序的nav元素列表填充嵌套在navbar-inner中的容器。 这个jsfiddle向我展示了http://jsfiddle.net/N6vGZ/4/的方式
此代码有效:
你有没有尝试过更具体的CSS?
.navbar ul.nav li.whoami { float:right; }
有时如果先前的CSS(在这种情况下是bootstrap)非常具体,它需要相同级别的特异性(或更高)来覆盖它。
可能有助于发布一个jsfiddle。 屏幕截图很难调试;)
你写的代码是
class="nav navbar-nav" col-12
上面的代码可以像这样替换
class="nav navbar-nav col-12"
以及下一次插入
class pull-right in your li button
尝试评论该行
//…REMOVED
添加新的class =“row”
发生了什么..在你的代码中。 当它进入移动设备时,div会附加到其他div上。 这是简单的解决方案。