0

I'm using Twitter Bootstrap with SASS. I'm using the former mainly for its grid and am trying hard to avoid adding inline-style-like attributes to rows as a means of controlling vertical spacing, as this . . .

.margin-top-15 {
  margin-top: 15px;
}

. . . essentially amounts to this . . .

<div style="margin-top: 15px;"></div>

Not good. Have any of you come up with a system for handling vertical positioning/spacing that does not consist of anything resembling the above?

Michael P.
  • 1,373
  • 3
  • 12
  • 33
  • possible duplicate of [Twitter Bootstrap - add top space between rows](http://stackoverflow.com/questions/10085723/twitter-bootstrap-add-top-space-between-rows) – Sam Dec 18 '14 at 14:10
  • http://stackoverflow.com/questions/24924024/is-there-a-reason-why-bootstrap-3-has-horizontal-padding-in-columns-but-not-vert/24940928#24940928 – Christina Dec 18 '14 at 19:27

1 Answers1

1

If the children inside the .col-*-* inside the .row has a p, h1-h6, ul, ol, form around them then you don't need anything:

https://jsbin.com/bojeje/1/edit

Bootstrap's CSS has a top and bottom margin on p, h1-h6, form, ul, ol, table (I think), .panel, and .well. The last two may just be bottom margins, you should look at the unpacked CSS to know what you're working with.

enter image description here

If that's not the situation, you can make a max-width (so you don't screw with the larger viewport styles and have to undo it).

@media (max-width:767px) {

    .row {margin-top:5%;}

}

Using percentages or ems even with a nested .row situation looks pretty good.

Christina
  • 34,296
  • 17
  • 83
  • 119