Twitter ブートストラップ グリッドを使用しています。
私は使用しようとしています:
<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>
しかし、何らかの理由で width + margin-left の合計は101.309328969%
私はブートストラップ 2.2.2 のより少ないバージョンを使用しています (2.3 は lessphp を介してコンパイルされないため!)。
奇妙なことに、これは 1 つのファイル (custom.less) がある場合にのみ発生します。
以下が含まれます：
@import "bootstrap.less"
@import "responsive.less"
これら2つを別々に含めると、正常に機能します。
私は素晴らしいフォントを使用しています。
Bootswatch テーマを使用していますが、私が知る限り、グリッドは変更されません。これら 2 つのファイルを使用します。
variables.less (diff) diff 変数.less 変数.デフォルト.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;
ブーツウォッチレス
// 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 で確認できます。