zurb-foundation

问题 I have a very simple code with Foundation CSS <div class="row"> <div class="large-offset-1 large-6 columns">Content goes here</div> <div class="large-4 end columns">Side goes here</div> </div> I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other. Doesn't Foundation provide a solution for this? 回答1: You could try this: <div class="row"> <div class="large-offset-1 large-6 columns padded

问题 What is the best practice to use Foundation features instead of jQuery CSS for Autocomplete? Here is my code: http://jsfiddle.net/qhoc/88kfb/ <div class="row"> <form class="custom"> <fieldset> <legend>Fieldset</legend> <div class="row"> <div class="large-12 columns ui-widget"> <label for="tags">Input Label</label> <input id="tags" type="text" placeholder="large-12.columns"> </div> </div> </div> I just don't like to include another .css file which is overhead on the page: <link rel="stylesheet

问题 I get this when using Foundation 5.0.2.0 in production mode. On Rails, Unicorn, NginX & Ubuntu. "NetworkError: 404 Not Found - http://mydomain.com/javascripts/vendor/modernizr.js" 回答1: Update 3/13/14 I don't have this problem on heroku with foundation-rails-5.1.1.0. Adding javascript_include_tag "vendor/modernizr" in the head works. I could remove the modernizr I copied to the vendor directory and remove the extra line in app.js I had the same problem on heroku, the app would crash because it

问题 Im using asp with foundation, is there anyway to switch between a tab to another using JS or ASP? Link (Simple tab). 回答1: A possible solution is to assign an id to the tab link and click it using jQuery. Given the following code excerpt, notice the id assigned to the anchor link... <dd><a href="#simple2" id="tabId">Simple Tab 2</a></dd> You could activate this link using this line of jQuery. $("#tabId").click(); 回答2: If you give the first tab and the first LI .active by default in the HTML,

问题 Im using asp with foundation, is there anyway to switch between a tab to another using JS or ASP? Link (Simple tab). 回答1: A possible solution is to assign an id to the tab link and click it using jQuery. Given the following code excerpt, notice the id assigned to the anchor link... <dd><a href="#simple2" id="tabId">Simple Tab 2</a></dd> You could activate this link using this line of jQuery. $("#tabId").click(); 回答2: If you give the first tab and the first LI .active by default in the HTML,

问题 I am using zurb foundation orbit slideshow. The next and the prev buttons or links on the left and right edge of the page is the default black triangle. Please have a look at this test page: http://www.endsnore.com/_test1b/index.aspx How do I customize the next and prev buttons or links? How do I add my own arrow code: ‹ and › OR add my own custom arrow images like these orange left and right arrows here: http://www.getaveo.com/index.aspx Please provide exact code example. I would appreciate

问题 NB: This has been asked but not really answered here: How do I make use of breakpoints in Zurb foundation 4? The small and large columns on Foundation 4 are really handy, but small activates perhaps a little earlier than I'd like - is there any way of setting a medium-columns setting for smallish but not tiny resolutions, e.g. 800 * 600? In my specific case, I'd like the following setup: <div class="small-12 medium-6 large-4 columns">First column</div> <div class="small-12 medium-6 large-8

问题 So I am creating a web page, where the menus on the left hand side are fixed (They follow you when you scroll up and down the page). I am currently using The Grid layout: Foundation (by zurb) http://foundation.zurb.com/docs/grid.php. Which uses a twelve column grid. I am having problems positioning the fixed layout and still using the grid at the same time. How can I use a grid layout and fixed elements on a page? <div class="container"> <div class="row"> <div class="four columns

问题 I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. How can I make the content of the menu be sticky such that on any size screen or page vertical scroll position hitting the menu toggle will show the menu content without scroll? My HTML so far is: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset=

问题 I am using the latest version of Foundation to add an off-canvas navigation menu and add a toggle to the tab-bar. While I have this working with the tab-bar being sticky, the content of the off-canvas menu scrolls with the page. How can I make the content of the menu be sticky such that on any size screen or page vertical scroll position hitting the menu toggle will show the menu content without scroll? My HTML so far is: <!doctype html> <html class="no-js" lang="en"> <head> <meta charset=