Tag: zurb foundation

zurb基础是否可以有全行宽

我使用基础3build立一个响应式网站，但我想有页脚和导航背景宽度占据整个宽度？ 我已经命名我的行 class="row navigation" class="row footer" 我试图寻找如何解决这个问题，但我没有select。 我假设这是在foundation.css文件中的一个小小的修复，但是现在有点太过分了，因为我是新手。 任何poiinters非常感谢。

全屏幕响应背景图像

我对前端开发和基础很陌生。 我试图得到<div class="main-header">作为响应式缩放的全屏图像。 谁能告诉我我做错了什么？ 它正确缩放，但没有显示完整的图像。 我也希望在移动设备上放置<div class="large-6 large-offset-6 columns">是否有可能？ HTML： <!– MAIN HEADER –> <div class="main-header"> <div class="row"> <div class="large-6 large-offset-6 columns"> <h1 class="logo">BleepBleeps</h1> <h3>A family of little friends<br>that make parenting easier</h3> </div> <!– END large-6 large-offset-6 columns –> </div><!– END ROW –> </div><!– END MAIN-HEADER –> CSS： .main-header { background-image: url(../img/bb-background2.png); background-repeat: no-repeat; background-position: […]

响应式高图不能正确调整窗口大小，直到窗口大小调整

我正在使用Zurb的Foundation框架中的Highcharts作为一个类的项目。 在章节选项卡中有三个图表。 一个在12列div内，另外两个在6列div内同行。 当页面加载时，精选图表不占用12列的可用宽度，两个较小的图表溢出其6列。 但是，当调整窗口大小或尝试使用Inspect元素进行调查时，图表会立即捕捉到正确的维度。 这种行为发生在Chrome，FF和IE中。 我意识到我可以设置一个特定的宽度，但我真的想利用基金会，并保持他们的响应。 我已经调整了CSS和Highcharts初始化，但我很难过。 有没有人遇到过这个问题？ 任何人都可以看到我失踪？ 这里是我的HTML摘录： <div class="row"> <div class="twelve columns"> <!–begin tabs below–> <div class="section-container tabs" data-section="tabs"> <section> <p class="title" data-section-title><a href="#">Heart Disease</a></p> <div class="content" data-section-content id="heart"> <div class="row feature-chart"> <div class="large-12 columns"> <div id="heartTimeline-container"> <div id="heartTimeline"></div> </div> </div> <!–close 12 columns–> </div> <!–close row–> <div class="row small-charts"> <div […]

打开新的基础项目时出现“Uncaught TypeError：a.indexOf不是函数”错误

我已经创build了一个新的基金会5项目通过bash，与foundation new my-project 。 当我在Chrome中打开index.html文件时， Uncaught TypeError: a.indexOf is not a function控制台中显示Uncaught TypeError: a.indexOf is not a function错误，源自jquery.min.js:4 。 我在基金会网站上的步骤之后创build了这个项目，但我似乎无法摆脱这个错误。 Foundation和jQuery看起来像是包含在index.html文件中的，并且链接的app.js文件包含$(document).foundation(); 有谁知道是什么原因造成这个错误？ 以及可能的解决scheme是什么？

鲍尔命令未find窗口

我在尝试使用bower（安装基础5）或者在命令行上获得与工作有关的任何事物时遇到了很大的问题。 我已经安装了 ruby1.9.3 混帐（从命令提示符选项运行） 的NodeJS 我已经成功跑了 npm install -g bower grunt-cli gem install foundation 而且这些都运行良好。 我查看了npm/node_modules目录，在那里我可以看到'bower'文件夹。 每次我打入bower无论是CMD，rubycmd或混帐打击我得到“命令不被认可” 我已经在环境variables中设置了gitpath。 令人厌烦的是凉亭上的指令。 它指出： npm install -g bower bower install 那么这是行不通的！

如何才能从Scss样式表导入variables和混合？

我正在使用Zurb Foundation 4（S）CSS框架，并且遇到大量重复样式的问题。 这是因为在@ @import 'foundation'中的每个文件中，Foundation的所有样式也被导入（ body ， .row ， .button和friends的规则）。 这会导致SCSS编译时间过长，并且很难在Chrome浏览器中浏览Web开发者控制台，因为Zurb的所有样式都被声明为四次或五次。 为了减轻这一点，我创build了一个globals scss文件，其中包含了Foundation使用的可覆盖variables（从foundation_and_overrides.scss复制粘贴，然后是foundation_and_overrides导入全局variables）。 只导入globals.scss文件只会在不使用Foundation mixins的文件中删除重复项。 它在使用Foundation mixins的文件中：我能否只导入SCSS文件中的mixins，而不导入具体的Foundation样式？

在Sass中使用函数是返回包含函数名称而不是结果的string

我正在尝试Zurb基金会5。 所以，我创build了一个新项目并尝试更改设置。 当我改变，例如， $row-width: rem-calc(1170); 在my-project / scss / settings.scss中，它将（在my-project / stylesheets / app.css中）编译成： .row { max-width: rem-calc(1170); } 它似乎不知道rem计算function。 如何使它正确计算rem-calc？

响应式字体大小

我使用Zurb Foundation 3网格创build了一个站点。 每个页面都有一个很大的h1。 CSS body {font-size:100%} /* Headers */ h1 { font-size:6.2em;font-weight:500; } HTML <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div><!– End Tagline –> </div><!– End Row –> 当我将浏览器调整为手机大小时，大字体不会调整，并导致浏览器包含水平滚动以容纳大文本。 我注意到，在Zurb Foundation 3的排版示例页面上 ，标题与压缩和扩展的浏览器相适应。 我错过了一些非常明显的东西吗 我如何做到这一点？