html - Twitter bootstrap grid adding up to > 100%? -

html - Twitter bootstrap grid adding up to > 100%? -

i using twitter bootstrap grid.

i trying use:

<div id="footer-groups" class="row-fluid collapse in"> <div class="span3"> users </div> <div class="span3"> clients </div> <div class="span3"> projects </div> <div class="span3"> tasks </div> </div>

but reason width + margin-left adding 101.309328969%

i using less version of bootstrap 2.2.2 (as 2.3 not compile through lessphp!).

the unusual thing is, happens if have 1 file (custom.less)

that contains:

@import "bootstrap.less" @import "responsive.less"

if include these 2 separately works fine.

i using font awesome.

i have bootswatch theme in use, not modify grid far aware, uses these 2 files

variables.less (diff) diff variables.less variables.default.less

1c1 < // cerulean 2.3.0 --- > // 6c6 < // global values --- > // global values 17c17 < @graylighter: #f5f5f5; --- > @graylighter: #eee; 23,30c23,30 < @blue: #2fa4e7; < @bluedark: #033c73; < @green: #73a839; < @red: #c71c22; < @yellow: #f7b42c; < @orange: #dd5600; < @pink: #f49ac1; < @purple: #9760b3; --- > @blue: #049cdb; > @bluedark: #0064cd; > @green: #46a546; > @red: #9d261d; > @yellow: #ffc40d; > @orange: #f89406; > @pink: #c3325f; > @purple: #7a43b6; 36c36 < @textcolor: @gray; --- > @textcolor: @graydark; 41c41 < @linkcolor: @blue; --- > @linkcolor: #08c; 49c49 < @monofontfamily: menlo, monaco, consolas, "courier new", monospace; --- > @monofontfamily: monaco, menlo, consolas, "courier new", monospace; 54c54 < @altfontfamily: @monofontfamily; --- > @altfontfamily: @seriffontfamily; 56c56 < @headingsfontfamily: 'telex', sans-serif; // empty utilize bs default, @basefontfamily --- > @headingsfontfamily: inherit; // empty utilize bs default, @basefontfamily 58c58 < @headingscolor: #317eac; // empty utilize bs default, @textcolor --- > @headingscolor: inherit; // empty utilize bs default, @textcolor 71c71 < @paddingmini: 0px 6px; // 22px --- > @paddingmini: 0 6px; // 22px 82c82 < @tablebackgroundhover: #e6e6e6; // hover --- > @tablebackgroundhover: #f5f5f5; // hover 89c89 < @btnborder: darken(@white, 20%); --- > @btnborder: #bbb; 92c92 < @btnprimarybackgroundhighlight: spin(@btnprimarybackground, 15%); --- > @btnprimarybackgroundhighlight: spin(@btnprimarybackground, 20%); 94c94 < @btninfobackground: @purple; --- > @btninfobackground: #5bc0de; 97c97 < @btnsuccessbackground: @green; --- > @btnsuccessbackground: #62c462; 100c100 < @btnwarningbackground: @orange; --- > @btnwarningbackground: lighten(@orange, 15%); 103c103 < @btndangerbackground: @red; --- > @btndangerbackground: #ee5f5b; 106c106 < @btninversebackground: @bluedark; --- > @btninversebackground: #444; 146c146 < @zindextooltip: 1020; --- > @zindextooltip: 1030; 183,193c183,193 < @navbarheight: 50px; < @navbarbackgroundhighlight: lighten(@navbarbackground, 8%); < @navbarbackground: @blue; < @navbarborder: darken(@navbarbackground, 8%); < < @navbartext: @graylighter; < @navbarlinkcolor: @white; < @navbarlinkcolorhover: @white; < @navbarlinkcoloractive: @navbarlinkcolorhover; < @navbarlinkbackgroundhover: darken(@navbarbackground, 12%); < @navbarlinkbackgroundactive: darken(@navbarbackground, 12%); --- > @navbarheight: 40px; > @navbarbackgroundhighlight: #ffffff; > @navbarbackground: darken(@navbarbackgroundhighlight, 5%); > @navbarborder: darken(@navbarbackground, 12%); > > @navbartext: #777; > @navbarlinkcolor: #777; > @navbarlinkcolorhover: @graydark; > @navbarlinkcoloractive: @gray; > @navbarlinkbackgroundhover: transparent; > @navbarlinkbackgroundactive: darken(@navbarbackground, 5%); 198,200c198,200 < @navbarinversebackground: @bluedark; < @navbarinversebackgroundhighlight: lighten(@navbarinversebackground, 5%); < @navbarinverseborder: darken(@navbarinversebackground, 3%); --- > @navbarinversebackground: #111111; > @navbarinversebackgroundhighlight: #222222; > @navbarinverseborder: #252525; 202,203c202,203 < @navbarinversetext: @white; < @navbarinverselinkcolor: @white; --- > @navbarinversetext: @graylight; > @navbarinverselinkcolor: @graylight; 205,207c205,207 < @navbarinverselinkcoloractive: @white; < @navbarinverselinkbackgroundhover: darken(@navbarinversebackground, 6%); < @navbarinverselinkbackgroundactive: darken(@navbarinversebackground, 6%); --- > @navbarinverselinkcoloractive: @navbarinverselinkcolorhover; > @navbarinverselinkbackgroundhover: transparent; > @navbarinverselinkbackgroundactive: @navbarinversebackground; 209c209 < @navbarinversesearchbackground: @white; --- > @navbarinversesearchbackground: lighten(@navbarinversebackground, 25%); 212c212 < @navbarinversesearchplaceholdercolor: @graylight; --- > @navbarinversesearchplaceholdercolor: #ccc; 233,234c233,234 < @warningtext: @orange; < @warningbackground: #f1ceab; --- > @warningtext: #c09853; > @warningbackground: #fcf8e3; 237,238c237,238 < @errortext: darken(#c45559, 5%); < @errorbackground: #f2bdb1; --- > @errortext: #b94a48; > @errorbackground: #f2dede; 241,242c241,242 < @successtext: darken(@green, 5%); < @successbackground: #d5ecbf; --- > @successtext: #468847; > @successbackground: #dff0d8; 245,246c245,246 < @infotext: darken(@blue, 10%); < @infobackground: #a7dff1; --- > @infotext: #3a87ad; > @infobackground: #d9edf7;

bootswatch.less

// cerulean 2.3.0 // bootswatch // ----------------------------------------------------- // typography // ----------------------------------------------------- @import url(//fonts.googleapis.com/css?family=telex); // scaffolding // ----------------------------------------------------- // navbar // ----------------------------------------------------- .navbar { .brand { padding: 14px 20px 16px; font-family: @headingsfontfamily; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } li { line-height: 20px; } .nav > li > { padding: 16px 10px 14px; font-family: @headingsfontfamily; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } .search-query { border: 1px solid darken(@linkcolor, 10%); line-height: normal; } .navbar-text { padding: 19px 10px 18px; line-height: 13px; color: rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); } &-inverse { .navbar-search .search-query { color: @textcolor; } } } @media (max-width: @navbarcollapsewidth) { .navbar .nav-collapse { .nav li > { font-family: @headingsfontfamily; font-weight: normal; color: @white; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); &:hover { background-color: #2b7cac; } } .nav .active > { .box-shadow(none); background-color: #2b7cac; } .dropdown-menu li > a:hover, .dropdown-menu li > a:focus, .dropdown-submenu:hover > { background-image: none; } .navbar-form, .navbar-search { border: none; } .nav-header { color: #2b7cac; } } .navbar-inverse .nav-collapse { .nav li > { color: @navbarinverselinkcolor; &:hover { background-color: rgba(0, 0, 0, 0.1); } } .nav .active > a, .nav > li > a:hover, .dropdown-menu a:hover { background-color: rgba(0, 0, 0, 0.1) !important; } } } div.subnav { font-family: @headingsfontfamily; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2); &-fixed { top: @navbarheight + 1; } } // nav // ----------------------------------------------------- // buttons // ----------------------------------------------------- .btn { #gradient > .vertical-three-colors(@white, @white, 5%, darken(@white, 0%)); @shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); .box-shadow(@shadow); &:hover { background-position: 0 0; } } .btn-primary { .buttonbackground(lighten(@btnprimarybackground, 5%), @btnprimarybackground); } .btn-info { .buttonbackground(lighten(@btninfobackground, 5%), @btninfobackground); } .btn-success { .buttonbackground(lighten(@btnsuccessbackground, 5%), @btnsuccessbackground); } .btn-warning { .buttonbackground(lighten(@btnwarningbackground, 5%), @btnwarningbackground); } .btn-danger { .buttonbackground(lighten(@btndangerbackground, 5%), @btndangerbackground); } .btn-inverse { .buttonbackground(lighten(@btninversebackground, 5%), @btninversebackground); } // tables // ----------------------------------------------------- // forms // ----------------------------------------------------- // dropdowns // ----------------------------------------------------- // alerts, labels, badges // ----------------------------------------------------- // misc // ----------------------------------------------------- i[class^="icon-"]{ opacity: 0.8; } // media queries // -----------------------------------------------------

the finish compiled css can viewed here https://gist.github.com/hailwood/4751104

html css twitter-bootstrap grid-layout