我正在使用twitter bootstrap网格。
我正在尝试使用：
<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>
但由于某种原因，宽度+边距左边加起来为101.309328969%
我使用较少版本的bootstrap 2.2.2（因为2.3不能通过lessphp编译！）。
奇怪的是，只有当我有一个文件（custom.less）
时才会发生这种情况包含：
@import "bootstrap.less"
@import "responsive.less"
如果我分开包含这两个，那么它可以正常工作。
我使用字体很棒。
我确实有一个bootswatch主题正在使用，但据我所知，它不会修改网格，它使用这两个文件
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 to use BS default, @baseFontFamily
---
> @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily
58c58
< @headingsColor: #317EAC; // empty to use BS default, @textColor
---
> @headingsColor: inherit; // empty to use BS default, @textColor
71c71
< @paddingMini: 0px 6px; // 22px
---
> @paddingMini: 0 6px; // 22px
82c82
< @tableBackgroundHover: #e6e6e6; // for hover
---
> @tableBackgroundHover: #f5f5f5; // for 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 > a {
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 > a {
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 > a {
.box-shadow(none);
background-color: #2B7CAC;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
background-image: none;
}
.navbar-form,
.navbar-search {
border: none;
}
.nav-header {
color: #2B7CAC;
}
}
.navbar-inverse .nav-collapse {
.nav li > a {
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
// -----------------------------------------------------
可以在此处查看完整编译的css https://gist.github.com/hailwood/4751104