个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试构建一个使用三列的应用程序。目前，我有以下代码:
<html>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css">
<style type="text/css">
.app {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.app-col {
height: 100%;
}
.fullwidth {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
</style>
<meta class="foundation-data-attribute-namespace">
<meta class="foundation-mq-xxlarge">
<meta class="foundation-mq-xlarge-only">
<meta class="foundation-mq-xlarge">
<meta class="foundation-mq-large-only">
<meta class="foundation-mq-large">
<meta class="foundation-mq-medium-only">
<meta class="foundation-mq-medium">
<meta class="foundation-mq-small-only">
<meta class="foundation-mq-small">
</head>
<body>
<div class="app">
<div class="row fullwidth" data-equalizer="">
<div style="width:33%; height:100%;">
<div class="row" data-equalizer="">
<div class="large-6 columns" style="background-color:#467EAF;">
<h3>Hello</h3>
<nav>
<ul style="list-style: none;">
<li><a href="/what/we-do" style="color:white;">
<h4><i class="icon-google-plus"></i>Welcome</h4></a>
</li>
<li><a href="/about" style="color:white;">
<h4><i class="icon-google-plus"></i>About Us</h4></a>
</li>
</ul>
</nav>
<ul class="inline-list text-center pull-bottom">
<li><a href="#" title="Google Plus" rel="publisher" target="_blank">Google Plus</a></li>
<li><a href="#" rel="publisher" title="LinkedIn" target="_blank">LinkedIn</a></li>
<li><a href="#" title="Contact Us">Email Us</a></li>
</ul>
</div>
<div class="large-6 columns" style="background-color:#829EBF;">
<h3>ABOUT</h3>
<nav>
<ul style="list-style: none;">
<li><a href="/what/we-do" style="color:white;">Overview</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div style="width:67%;">
Content
<ul class="inline-list text-center pull-bottom">
<li>©2015 Goes Here</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation.min.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
</body></html>
我的问题是，我的列没有占据整个屏幕的高度。我认为这是 data-equalizer 属性的目的。不幸的是，看来我错了。我做错了什么？
最佳答案
关于css - 在 Zurb Foundation 中使用全高柱，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28720569/
25
4
0
我在 ZURB 的论坛上发布了一个问题，但我注意到任何帖子都没有答案。 因为我认为这个问题可能会发生在许多其他人身上，所以我认为把它放在 SO 上也是一个好主意。它来了: 我使用以下标记制作了一个最小
我有一个非常简单的 Foundation CSS 代码 Content goes here Side goes here 我希望列之间有边距。目前，只有填充。所以如果我添加 bac
根据对先前提出的问题的回答，我有一个全屏布局: CSS fullscreen grid layout (with some scrolling sections) 我正在使用的线框: 编辑:这是我希望
现在下拉菜单的内容默认在右下角。 有没有设置它的选项，让它转到左下角？ (基础 5) 最佳答案 “正确”的风格是通过 JS 应用的。要覆盖它，只需提供 #contentDrop #contentDro
.grid-container的默认宽度是多少？在大屏幕上？我怎样才能改变它并使它变大？正确的做法是什么？ 最佳答案 .grid-container 的默认宽度在_settings.css 文件中定义
.grid-container的默认宽度是多少？在大屏幕上？我怎样才能改变它并使它变大？正确的做法是什么？ 最佳答案 .grid-container 的默认宽度在_settings.css 文件中定义
如何禁用中/小屏幕的顶部栏折叠？ 我按照 Here 中的说明进行操作但无论我将最小宽度设置为什么，我都会得到相同的结果。 最佳答案 如果您使用的是 SCSS 版本，那么您可以修改断点。 $topbar
您是否遇到过 zurb 基金会的顶栏问题？ 输入框不适合导航。我没有修改任何东西，只是粘贴了来自 foundation's page 的代码到他们包含在基础文件中的示例网站。将字体更改为 Open S
出于多种原因，复选框在最新的 Foundation (4.1.6) 中存在问题。有没有一种简单的方法可以阻止 Foundation 接管它们？我需要 custom我的类 form s 其他原因。我如何
我最近开始将 Zurb Foundation 4 用于 Asp MVC 网站，但我不太明白开关控件应该如何工作。文档没有说太多 http://foundation.zurb.com/docs/comp
我的问题是，在桌面上我喜欢先有菜单，然后是最右上角的标志。目前，当我将模板缩小到移动版本时， Logo 位于菜单下方，这并不令人满意。我想在菜单之前吃。我试过使用推/拉没有成功。 在移动 View 中
是否有任何文档解释foundation.css 中的每个类？我不擅长前端开发，而且似乎没有通过 zurb 网站上提供的粗略文档来掌握概念。提前致谢。 最佳答案 没有。我认为对他们来说，ZURBling
刚刚切换我的 Rails 项目以测试 Zurb Foundation 5，现在切换顶部栏菜单不起作用。 当视口(viewport)很小时，顶部栏菜单项消失并且菜单图标像以前一样显示，但是当我单击菜单图
我正在使用 Zurb Foundation 并具有以下 html: Tab 1 Content of section 1. Tab
我正在尝试使用 zurb Foundation 5 显示模式。但是当我单击按钮时它不起作用并且无法打开。我正在使用这个 html 代码。 index Awesome. I ha
有什么我可以在命令行中输入的东西来找出我正在运行的版本吗？ 最佳答案 在不了解您的具体情况的情况下，最简单的方法是在初始化 Foundation ( $(document).foundation();
我正在使用 Zurb 的 Foundation 4.2.3，但是当我打印页面时，网格布局始终没有得到维护。 例如， XXX Lorem
我已经下载了新的 Zurb Foundation 6 完整包 ( Foundation for Sites )。存档文件包含以下文件和文件夹: [css] > app.css, foundation.
我正在尝试使用 zurb 的基础框架在网站上实现一个 offcanvas，用于移动查看，并且只是从文档中复制了它的代码，但它就是行不通。 代码如下: $(document).found
我喜欢 Zurb Foundation(SASS，尤其是 Zurb Foundation for Apps)，但想将其与 Facebook ReactJS 和 Flux 一起使用 这就是删除 Angu
我是一名优秀的程序员,十分优秀！