grid-system

How to make gutter between columns in a CSS grid system

由 依然范特西╮ 提交于 2019-12-30 11:51:14
问题 Does anyone know how to make a 20px or 1em gutter for the grid system below? I got all the div s to all go in a row but I want to know how to add a gutter in between each div. I'm doing this to learn how grids are made. jsFiddle Here. body { font:20px/1.2 Verdana, Arial; padding:0px; margin:0px; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; } .row { width:100%; } .row > [class*='col-'] { /* ... */ } .row > [class*='col-']:last-of

Clear Rows When Doing Multi-responsive Columns - Bootstrap

由 只愿长相守 提交于 2019-12-17 15:15:20
问题 That title might not be very accurate but here is the situation: As you can see in the HTML, The grid system goes from 4 images on xl screens to 3 on lg screens to 2 on anything less. I am trying to get it to display properly - the proper amount of images at each screen size, that is. However, something funky is going on and can't quite figure it out using bootstraps classes. It seems to me that I would have to add rows dynamically at each break-point. Any suggestions? -- UPDATE -- Just

Why does bootstrap grid improperly stack these elements?

由 别说谁变了你拦得住时间么 提交于 2019-12-12 06:31:01
问题 The third element in my grid is not breaking to the left side, instead it is breaking to the right. I believe this is because the columns are not the same height. I cannot simply attach 2 rows because the way the code is built, it should appear as 1x4, 2x2, then 4x1. I do not want to resort to showing and hiding rows depending on the screen size through javascript or css because I would rather have the grid system work the way it should. Attached is a sample of my code for reference. <div

How to offset div columns in CSS grid system

由 牧云@^-^@ 提交于 2019-12-10 22:03:35
问题 Does anyone know to offset the first two div s that are in side row that have the class col-3-12 to have an offset of offset-6-12 and offset-9-12 to be on the right side of my grid system jsFiddle CSS: body { font:20px/1.2 Verdana, Arial; padding:0px; margin:0px; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box; } .container { padding: 20px 20px 0 20px; background-color: red } .row { padding: 0; *zoom: 1; } .row:after, .row:before {

Bootstraps Grid System on Internet Explorer

由 丶灬走出姿态 提交于 2019-12-08 02:35:56
问题 We are using Bootstraps on a website but Internet explorer doesn't seem to be using the grid system from Bootstraps. We have a class assigned with class="col-sm-6 col-md-4 col-md-offset-4" but on Internet Explorer 11 it is stretching across the screen. Here is an image of the problem http://wikicopy.com/loginproblemIE.png The background stretches across the whole screen. It works fine on Firefox, Chrome, and Safari. 回答1: Is your site rendering in compatibility mode? if so, adding the meta tag

zurb foundation is it possible to have full row width

由 ◇◆丶佛笑我妖孽 提交于 2019-12-03 00:55:38
问题 I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as class="row navigation" class="row footer" I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it. Any poiinters much appreciated. 回答1: I ran into the same problem yesterday. The trick is, for full width

zurb foundation is it possible to have full row width

由 自闭症网瘾萝莉.ら 提交于 2019-12-02 14:18:14
I'm using foundation 3 to build a responsive website but I want to have the Footer and Navigation background width to occupy the entire width? I have named my rows as class="row navigation" class="row footer" I tried looking for how to fix this but I'm out of options. I'm assuming it is a small fix in the foundation.css file but it's a bit too overwhelming at the moment as I'm new to it. Any poiinters much appreciated. I ran into the same problem yesterday. The trick is, for full width spanning blocks, you just keep them out of the row/column structure, since row/column will always apply the

CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?

由 ﹥＞﹥吖頭↗ 提交于 2019-11-30 08:59:48
Currently my "flex" items look like this (vertically aligned: top)... _____________________________________ 1 _____________________________________ 2 _____________________________________ 3 _____________________________________ 4 _____________________________________ My Goal is to make them look like this (vertically aligned: middle)... _____________________________________ 1 _____________________________________ 2 _____________________________________ 3 _____________________________________ 4 _____________________________________ My requirements: The flex container must stay at 100% in height

CSS Flex Box: How to vertically align “flex items” to middle without losing flex item height?

由 非 Y 不嫁゛ 提交于 2019-11-29 12:52:35
问题 Currently my "flex" items look like this (vertically aligned: top)... _____________________________________ 1 _____________________________________ 2 _____________________________________ 3 _____________________________________ 4 _____________________________________ My Goal is to make them look like this (vertically aligned: middle)... _____________________________________ 1 _____________________________________ 2 _____________________________________ 3 _____________________________________

Material UI and Grid system

由 依然范特西╮ 提交于 2019-11-28 15:24:20
I'm playing a little bit with Material-UI . Are there any options for creating a grid layout (like in Bootstrap )? If not, what is the way to add this functionality? There is a GridList component but I guess it has some different purpose. Material UI have implemented their own Flexbox layout. It appears they initially wanted to keep themselves as purely a 'components' library. But one of the core developers decided it was too important not to have their own . It has now been merged into the core code and was released with v1.0.0 . You can install it via: npm install @material-ui/core It is now
订阅 grid-system