Problem with width of span?

HTML & CSS
1

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

Here is my code:

http://codepen.io/thehung1724/pen/iynsl

Image:

2

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

Hi,

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

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


[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

thank you Paul, but i’ve seen some developers use this structure just why don’t understand my code have problem.

5

I just explained why :slight_smile:

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:


*, *: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:


 .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 :slight_smile: