zurb-foundation

问题 I've been using zurb foundation for quite a while now. I'm using a bower + compass setup as described here http://foundation.zurb.com/docs/sass.html Today while working I noticed that a page was taking a while to load and while attempting to trouble shoot an issue I noticed that there are a many duplicate directives in the generated css file. I'm sure this is probably me doing something wrong, but I don't know where to start looking and I don't even know what information to provide that might

问题 In sass, the way one imports is by using the import command. I will use Zurb Foundation as an example: @import "foundation"; This will then import the whole foundation.scss file and all it's relative imports to the top of the current file. This means that the entire foundation.scss file will be compiled and outputted along with the contents of the file to the final <name here>.css file. Though this is good for customisation, such as custom colors and spacing, it becomes a pain when creating

问题 I'm using zurb-foundation. Is there a way to set two grid same height, if they are horizontally arranged. And if they are vertically arranged I want to set different height. <div class="row"> <div id="left" class="large-4 columns"> <div id="right" class="large-8 columns"> </div> For example if the "left" grid has 400px height and the "right" grid has 300px height, I want to set right grid 400px as far as they are horizontal. But in a small display like smartphone they are arranged vertically.

问题 JSFiddle body { background-color: #111111; color: #ffffff; /*max-width: 100%;*/ overflow-x: hidden; } .row { max-width: 100rem; } .svgrow { min-width: 70rem; } .svgrow svg { overflow-x: auto; } I want to have this svg horizontal scrollable on small screens, without the body being horizontal scrollable. In addition to that I want only relative units to be used. I already tried to put the overflow property in different positions, but I can't get it to work. I use the foundation framework. 回答1:

问题 I am using foundation's joyride plugin, everything is working fine in Chrome and FF, but in ie9 the highlighted element is clickable. Ex. I am highlighting a form's submit button like "When you are done, Click this Button to Register" when I click the highlighted button the submit action takes place in IE9 browser. But it is working fine in Chrome and FF, when in click the highlighted Submit button nothing happens. Is there any way to fix this. Thank you 来源： https://stackoverflow.com

问题 In my javascript, if the window is a specific width, add the data-orbit attribute to my intended slider. This fires on $(window).resize() and $(function(){}) . The condensed version... var ui = { mobile : function() { var i = 0; if($(window).width() <= 568) { this.resizeOffers(); } else { this.mobileClear(); } }, resizeOffers : function() { $('#offers .inner').attr('data-orbit', ""); }, mobileClear : function() { $('#offers .inner').removeAttr('data-orbit'); } } Everything works great if you

问题 I have tried everything in my knowledge (however little there is), but I can not make the top bar menu render properly on small screens. I want the menu to reduce down to a clickable menu item on small screens, basically responsive behaviour from the menu. Apparently the following code alone should make it work, but it doesn't. <header> <div class="row"> <div class="large-12 large-centered small-12 small-centered columns"> <nav class="top-bar" data-topbar role="navigation"> <section class=

问题 I am trying to create an off-canvas menu with foundation 6 like it's done in the official site. When it comes to the mobile menu bar, I'd like to make it sticky to the bottom of the screen. .title-bar { position: fixed; width: 100%; bottom: 0; } But as soon as I click the mobile menu, the menu bar jumps away as if it was absolute instead of fixed . Anyone had this problem and solved it yet? 回答1: There are a few changes to be made. The <div class="content"> should be mentioned inside the <div

问题 I have implemented a left hand menu which consists of multiple dropdowns which align to the right, so its like a fly out menu. On a large screen this works fine. On a small screen Foundation automatically changes the dropdown to align to the bottom, which also works fine. However, on a medium screen ie, tablet, the dropdown still tries to align to the right but the majority of it is off screen and cannot be selected. I would therefore like to have it so that the dropdown automatically aligns

问题 I’m trying to make this email responsive on both mobile and desktop. When I test this on Gmail mobile app the email does not collapse. The columns hold the 6 by 6 grid instead of forming into full with 12 grids each. Can anyone help me figure out what the issue is? I’ve already inlined my CSS using Zurb inliner. But the issue with the grids not collapsing is still there. Also can anyone let me know of an email tester they would recommend to test responsive emails during development. Here is a