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的排版示例页面上 ,标题与压缩和扩展的浏览器相适应。 我错过了一些非常明显的东西吗 我如何做到这一点?