SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    went back to the bootstrap basics

    so still getting to know this system. it is pretty neat actually.
    But how do i get rid of those margins so the the span can butt right next to each other?
    i put in my .css a
    Code:
    *{
    margin:0px;
    padding:0px;
    }
    also tried to put it in the spans themselves.
    thought it would override the bootstrap.min.css obviously it didn't.
    So am I stuck w/them?
    Thx
    DbootstrapMargins.jpg

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    We could tell you in a jiff what's causing that gap with a link to an actual page. If you are working locally, you could post a working example on a site like codepen.io.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    thank you Ralph will go check that out. have seen code pen a few times but never in depth.
    looks kinda interesting actually
    here it is if I did it correctly
    http://codepen.io/pdxSherpa/full/DFaql
    Thank you
    D

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    The pattern that you are using apparently expects gutters between containers. Thus, bootstrap is applying a margin-left.

    Code:
    DFaql (line 275)
    [class*="span"] {
        float: left;
        margin-left: 20px;
        min-height: 1px;
    }
    
    DFaql (line 371)
    .row-fluid [class*="span"] {
        -moz-box-sizing: border-box;
        display: block;
        float: left;
        margin-left: 2.12766%;
        min-height: 30px;
        width: 100%;
    }
    Looks like you need to read the documentation and find out how boostrap works.

    You also need to understand a little CSS... like Cascade and specificity.

    What browser are you using? Most have some form of developers tools built in that help you identify the cause of behaviors like this, but if you do not know how CSS works and do not know how your product (bootstrap) applies CSS... you're at a disadvantage.

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Yes, Ron has pointed to the error. I agree with him that if you are going to use a framework, you need to do plenty of research into how it works. Otherwise, it's SO much easier to start with a blank canvas than to start out with a mass of code that you have to wade through and hack around to get what you want. (It's like trying to build a house from a pile of tornado wreckage, instead of starting fresh with a clean patch of land.)

  6. #6
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Good morning guys!
    I use chrome & saw the margin by using "inspect element" feature. I also use firefox but prefer chrome for looking at elements/info.
    I figured the margin was set in the original boostrap stylesheet. But by virtue of the "cascading" feature of css my new styling for that span should have over written it?
    Yes I probab (and will try to do so) should spend more time on the documentation. But kinda multitasking. going over the tutorial/improving on it and seeing what haps. And while the tutorials are pretty good they don't always cover stuff that comes up...like that wide gutter.
    Cheers all, have great friday.
    D

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Also I guess I was worried about thouching the original stylesheet. but in this case I would just grab the bits RonPat pointed out above, and tweak them. put them in my own css and that should over ride it.
    Do you guys have a favorite method?
    D

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    But by virtue of the "cascading" feature of css my new styling for that span should have over written it?
    If both rules have the same specificity, whichever the browser sees last will prevail.

  9. #9
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    795
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Ralph.
    hence i was not "specific" enough.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •