2013-07-10 124 views
0

嗯,我自定義列寬爲75px。引導列寬度問題

,如果我有這個

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span1">some text</div> 
    </div> 
</div> 

列有正確的寬度,但如果我有這個

<div class="container-fluid"> 
    <div class="span1">some text</div> 
</div> 

列有不同的寬度。

+1

一些相關的CSS代碼或鏈接到你的網站將是有益 –

+0

我認爲類=「排液」的CSS是有 –

+0

嘗試提供的jsfiddle也請。 – PeterFour

回答

0

這是因爲.row-fluid .span*寬度是百分比。 如果您調整窗口瀏覽器的大小,則會看到列寬發生變化,在本例中爲span1。

持有總960x75像素到SPAN1,把你的自定義CSS

.row-fluid .span1{ 
    width: 75px !important; 
    *width: 75px !important; 
} 
0

網格系統通常遵循創建佈局嚴格的等級制度。

Twitter引導程序期望您的所有列都保留在行內。爲bootstrap編寫的CSS根據您給出的層次結構使用後代選擇器。所以如果你改變層次結構,將要應用的規則將會不同。

以下從引導CSS提取可以把一些相同的光。

.row-fluid [class*="span"] { 
    display: block; 
    float: left; 
    width: 100%; 
    //Other properties removed for readability 
} 

.row-fluid .span12 { 
    width: 100%; 
    *width: 99.94680851063829%; 
} 

.row-fluid .span11 { 
    width: 91.48936170212765%; 
    *width: 91.43617021276594%; 
} 

.row-fluid .span10 { 
    width: 82.97872340425532%; 
    *width: 82.92553191489361%; 
} 

.row-fluid .span9 { 
    width: 74.46808510638297%; 
    *width: 74.41489361702126%; 
} 

.row-fluid .span8 { 
    width: 65.95744680851064%; 
    *width: 65.90425531914893%; 
} 

.row-fluid .span7 { 
    width: 57.44680851063829%; 
    *width: 57.39361702127659%; 
} 

.row-fluid .span6 { 
    width: 48.93617021276595%; 
    *width: 48.88297872340425%; 
} 

.row-fluid .span5 { 
    width: 40.42553191489362%; 
    *width: 40.37234042553192%; 
} 

.row-fluid .span4 { 
    width: 31.914893617021278%; 
    *width: 31.861702127659576%; 
} 

.row-fluid .span3 { 
    width: 23.404255319148934%; 
    *width: 23.351063829787233%; 
} 

.row-fluid .span2 { 
    width: 14.893617021276595%; 
    *width: 14.840425531914894%; 
} 

.row-fluid .span1 { 
    width: 6.382978723404255%; 
    *width: 6.329787234042553%; 
}