个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我在 Rails 项目上通过 zurb-foundation gem 使用 Zurb Foundation 3。一切顺利，直到我尝试添加导航栏:
<body>
<div id="container" class="twelve columns">
<div class="fixed contain-to-grid">
<nav class="top-bar">
<ul>
<li class="name"><h1><%= link_to "Home", root_path %></h1></li>
</ul>
<section>
<ul class="left">
<li><a href="#">Left</a></li>
</ul>
<ul class="right">
<li><a href="#">Right</a></li>
</ul>
</section>
</nav>
</div>
看起来像:
除了颜色，我没有覆盖任何 zurb 样式，我的假设是它看起来与文档中的第一个示例非常相似 http://foundation.zurb.com/docs/navigation.php但事实似乎并非如此。该文档还提到了 javascript 依赖项，但这些都包含在内。
有人知道如何开始让它看起来漂亮吗？
编辑:
像这样将行添加到第一个列表:
<ul>
<li class="name"><h1><%= link_to "Home", root_path %></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
呈现这个:
检查元素以查看是否显示了导航 JS:
(function ($){
$.fn.foundationNavigation = function (options) {
var lockNavBar = false;
// Windows Phone, sadly, does not register touch events :(
if (Modernizr.touch || navigator.userAgent.match(/Windows Phone/i)) {
$(document).on('click.fndtn touchstart.fndtn', '.nav-bar a.flyout-toggle', function (e) {
e.preventDefault();
var flyout = $(this).siblings('.flyout').first();
if (lockNavBar === false) {
$('.nav-bar .flyout').not(flyout).slideUp(500);
flyout.slideToggle(500, function () {
lockNavBar = false;
});
}
lockNavBar = true;
});
$('.nav-bar>li.has-flyout', this).addClass('is-touch');
} else {
$('.nav-bar>li.has-flyout', this).hover(function () {
$(this).children('.flyout').show();
}, function () {
$(this).children('.flyout').hide();
});
}
};
})( jQuery );
从基础中寻找 css，它适用于按钮和所有内容，导航栏样式似乎也在那里，例如:
.nav-bar {
height: 40px;
background: #4d4d4d;
margin-top: 20px;
padding: 0;
}
最佳答案
我在使用 zurb-foundation 3.0.9 时遇到了与您完全相同的问题。尝试升级到 3.1.1
在你的 Gemfile 中，使用:
gem 'zurb-foundation', '~> 3.1.1'
在 application.scss 中:
@import 'foundation';
确保你在文档中准备好这个
$(document).foundationTopBar();
更新 gem
bundle update
确保删除了缓存:
bundle exec rake tmp:cache:clear
干杯!
关于ruby-on-rails - Zurb Foundation Nav 在 Rails 项目中的风格有限，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12718903/
29
4
0
我是 Bootstrap 的新手。每次我使用 Bootstrap 创建导航栏时，我都会使用这些元素/类，但所有这些都让我感到困惑: .nav .navbar .navbar-nav 谁能解释一下这些
我正在使用最新的 Angular Bootstrap 版本。当屏幕尺寸缩小到 768 像素以下时，类“nav nav-pills nav-justified”不会堆叠选项卡。 我引用了网站 http:
我有以下代码，div 内有两个 ul 元素，每个元素都有导航、导航丸、导航堆叠类。 All Pending K
我正在使用 Bootstrap pill 在同一页面上进行切换。有两个导航丸和两个分别对应的 div。我已经正确构建了第一个 div，并且工作正常。但是当我试图构建第二个 div 时，第一个 div
似乎 NAV 的潜在性质是抵制要求强制填充字段。对于我们的业务逻辑，必须填充某些字段才能使数据有效。例如，客户记录必须至少有姓名和电话号码。我搜索了很多地方，但没有找到合适的解决方案。那么如何做到这一
Bootstrap Navbars Toggle navigation
我注意到，在 Dynamics NAV 2013 中，一些 TextConst 已开始使用 @@@ 作为语言代码。 例如在 Codeunit 12 中: PurchaseAlreadyExistsEr
如何像图片一样更改引导菜单中打开的链接的颜色。它适用于鼠标悬停和单击后更改为菜单的默认颜色。 我需要像图片一样的东西。 HTML @Html.Action
我正在尝试列出我的 drop-down它工作正常，但在我点击财务报告链接后，我想要 的剩余内容标签向下移动和 drop-down应该在里面打开， .请提供任何帮助，我很感激。 这是我的代码:
我正在使用 Angular4，nav nav-tabs 样式似乎不起作用，我得到的只是无序的垂直列表，如下图 - 我的选项卡组件代码是 - @Component({ selector: 'tabs',
当我尝试构建我的网页时，我的菜单链接底部和我的主导航区域之间有一个非常小的空间(大约 2 像素)。我只使用颜色来查看布局的工作原理，但有人能告诉我为什么会有差异吗？当然他们应该是相同的高度？当前状态可
即使我不是一个新程序员，Html 和 Css 问题对我来说也是无解的。简单阅读文档/规范似乎还不够，因为每个示例都带有一个新的标签和类早午餐来演示其中一个的使用。我的代码基于 Bootsrap 官方演
我喜欢导航标签的外观，所以我想使用它。这是 Web 应用程序现在的样子: 不幸的是，如果我单击其他选项卡(例如“Buscar alojamiento”)，事件选项卡不会更改。这是我的代码:
我正在尝试使用 nav navbar-nav navbar-right 创建一个下拉菜单。我让它在移动设备(较小的屏幕)上对齐但是当我点击下拉菜单时它不会将菜单项向下推但是而是下拉其他菜单项。我不确定
工具提示在这种情况下工作正常 Home 但是一旦我将它嵌套在带有 nav 和 nav-side
我有一个应用程序，如果我提取代码并创建一个单独的 html 文件，只用它工作的代码，它就可以工作。 About
我对 Twitter Bootstrap 有疑问。我创建了一个简单的下拉菜单，但是当我在 chrome 检查器中检查代码时，我看到类 nav nav-pills被添加到 元素。 如何删除这些类？
我正在尝试删除我的菜单和后续部分之间的 Bootstrap 空白。我的菜单 HTML 是:
我正在使用 Bootstrap 4 并尝试使导航项与我的导航栏具有相同的高度，这样当我向其添加背景色时，它看起来就像穿过导航栏的条纹。 最初，该元素居中，并在顶部和下方留有空间。我添加了负边距以使其与
我是一名优秀的程序员,十分优秀！