zurb-foundation

问题 I am trying to put a padding/margin of 10 px between 2 columns. But when I do then the 2nd column breaks. html code <div class="row collapse"> <div class="large-6 medium-6 small-12 columns">Content 1</div> <div class="large-6 medium-6 small-12 columns">Content 2</div> </div> If I remove collapse then column adds padding to it's all direction. How can I make the row full width but only 10px padding or margin between 2 columns. Any help is highly appreciated. Thanks in advance. 回答1: We can't

问题 EDIT 4 There's a module defined in (from Foundation 3 package) app.js : (function($, window, undefined) { 'use strict'; var $doc = $(document), Modernizr = window.Modernizr; $(document).ready(function() { $.fn.foundationAlerts ? $doc.foundationAlerts() : null; // ... $.fn.foundationClearing ? $doc.foundationClearing() : null; $('input, textarea').placeholder(); }); // touch support detction is omitted })(jQuery, this); I tried to interpret it to the next form: BOOTSTRAP.JS require.config({

问题 I'm looking into Bootstrap vs Foundation my criterias are: Lightweight Easily customized Easily build complex HTML layout Mobile / Responsive In my past experience with Bootstrap, building layout from a designer mockup as a "pixel perfect" HTML was not trivial. Your thoughts, ideas are appreciated. 回答1: Bootstrap and Zurb Foundation are both CSS frameworks, but they have a different purposes. The primary goal of Bootstrap is fast prototyping of websites or web applications that have a base

问题 i am currently working on a project where the login/register is handled through modal boxes (so i click the login button and a nice modal reveals with a form in). Im using foundation 5's reveal modal to house my login form but when the form is submitted and theres a validation error the modal closes. The reason this is happening is because i am redirecting back to the route where the login form is and in that route a button needs to be clicked to fire the modal. What i was wondering is, is

问题 I just started with Zurb-Foundation, and I am trying to make a website that needs to be run in landscape mode only, when it is started on a mobile device(small screens) How would i do this? I guess it has something to do with media queries. So I want it to force orientation to landscape mode if the screen is a mobile device. This is a website, not an Application to Android or IOS. I am working in Foundation 5, thanks for any help. 回答1: With the orientation selector that general03 recommended,

问题 I'm looking for a way to achieve full-width/justified tabs in a container in my Foundation app. This is what's happening currently. In Twitter Bootstrap I can do this and I'm looking for the same type of functionality in Foundation. Is it possible natively? I'm just using the default tabs structure example right now. 回答1: Tabs in Foundation use the flexbox model. By default, their flex-grow is 0 (they don't grow to fill up the parent). Change it to 1 and they will. Optionally, you might want

问题 I am trying to create a background color for my row, yet when I set a background color it extends over the regular width of my columns. Then I tried making the row smaller with padding, which works, but makes the columns smaller. I need to somehow remove the pink area, keep only the red background, AND keep the columns even. Any ideas? <!-- When applying the padding, the columns background turns OK. However, the columns themselves aren't as even as "normal" columns without padding --> <div

问题 I am looking to build a website in custom CSS and without frameworks just to increase my command over CSS. I want my entire site to retain its layout and look no matter what the device. Foundation does it with it's "smallgrid" and bootstrap with ".col-xs-". How do I do that without a framework? 回答1: Foundation and Bootstrap both use the same way to provide you flexible grids : they fix every possible column width in percents, and use media queries to switch between mobile/tablet/desktop grids

问题 I'm merging Foundation 4 with Bones to create a WP Starter theme. I had everything working fine with the JS from Foundation 3, but now that I'm trying to implement the Foundation 4 JS I'm running into some issues. I followed the steps found in the Foundation 4 JS Documentation, but still had no luck. Here is the code I placed directly before the closing body tag (I know the correct way is to enqueue the script, but for testing I was just pasting it directly above the closing body tag):

问题 I'm trying to create an image_tag and specify a data- attribute that does not have any value set to it. I'm trying to add data-tooltip, for use with Foundation 5 tooltips. It seems that if any value is actually set to this, Foundation uses the same tooltip text every time and ignores the title attribute of that element (so every tooltip will say whatever the first one you hovered on was... which seems buggy in and of itself on Foundation's part also) This is what I need to generate: <img src=