css - Bootstrap3 migration failed -

i using code create ruler on site:

css:

.ruler, .ruler li {     margin: 0;     padding: 0;     list-style: none;     display: inline-block; } /* ie6-7 fix */ .ruler, .ruler li {     *display: inline; } .ruler {     background: lightyellow;     box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;     border-radius: 2px;     border: 1px solid #ccc;     color: #ccc;     margin: 0;     height: 3em;     padding-right: 1cm;     white-space: nowrap; } .ruler li {     padding-left: 1cm;     width: 2em;     margin: .64em -1em -.64em;     text-align: center;     position: relative;     text-shadow: 1px 1px hsl(60, 60%, 84%); } .ruler li:before {     content: '';     position: absolute;     border-left: 1px solid #ccc;     height: .64em;     top: -.64em;     right: 1em; }  /* make me pretty! */ body {     font: 12px ubuntu, arial, sans-serif;     margin: 20px; }  div {     margin-top: 2em; } 

html:

<ul class="ruler"><li>1</li><li>2</li><li>3</li><li>4</li></ul> 

it working ok bootstrap2:

http://jsfiddle.net/uvt5u/4/

now i'm migrating bootstrap3 , ruler broken:

http://jsfiddle.net/uvt5u/

how can working? kind regards.

this because in bootstrap 3 box-sizing style set border-box, while in bootstrap 2 it's not.

my firebug points me rule setting style:

*, *:before, *:after {     -moz-box-sizing: border-box; } 

bootstrap.min.css line 9