SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with width of span?

    I don't know what it called but see image. I just use one class for theme?

    Here is my code:

    Code:
    http://codepen.io/thehung1724/pen/iynsl
    Image:
    Untitled.png

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,506
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by thehung1724 View Post
    I don't know what it called but see image. I just use one class for theme?
    It looks to me like you are talking about the bootstrap "span4" class. So this is not about HTML <span>, this is a bootstrap question. Is that right? (the attachment is still pending approval)

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You seem to have changed some things in the bootstrap code.

    e.g. This code usually only applies to fluid layouts:

    Code:
    [class*="span"]:first-child {
      margin-left: 0;
    }
    You seem to have removed the .row-fluid selector that was in front of it.

    The grid in the bootstrap fixed width layouts moves .row 20px to the left (margin-left:-20px) so that all inner spans get a 20px left margin by default which pushes them back into place so you don;t need to negate the margin from the first child. (i.e. the container is 940px wide but .row gets dragged to the left by 20px making it 960px wide which allows 3 elements of 300px all with a 20px left marghin to fit).

    Secondly you have added a border to the span classes and that will make them 1px too wide to fit and the last one will drop down. You should use an inner element inside the span class to apply your borders and leave the span class alone as that is your structure.

  4. #4
    SitePoint Enthusiast thehung1724's Avatar
    Join Date
    Sep 2013
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you Paul, but i've seen some developers use this structure just why don't understand my code have problem.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,342
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thehung1724 View Post
    thank you Paul, but i've seen some developers use this structure just why don't understand my code have problem.
    I just explained why

    It's simple math. You can't add borders to the span classes unless you use the box-sizing box model which is what bootstrap 3 uses by default (but not bootstrap2).

    In bootstrap 3:
    Code:
    *, *:before, *:after {
    	-webkit-box-sizing:border-box;
    	-moz-box-sizing:border-box;
    	box-sizing:border-box
    }
    Don't mix the responsive classes with the fixed width classes as they are different and behave differently.

    To fix your layout you could do this:

    Code:
     .row [class*="span"] {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
      }
     .row [class*="span"]:first-child {
        margin-left: 20px;
      }
    However as I said before you are better off leaving the bootstrap classes alone unless you know what you are doing as you will soon break things. If you put the border on an inner element instead and removed the erroneous first-child rule the layout would have worked.

    This is one of the reasons I dislike bootstrap because people stop thinking for themselves


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
  •