2014-04-12 36 views
1

我使用Bootstrap 3,我把我的博客文章放在我的屏幕上。然而,當我試圖展示它時,該博客看起來有點難看,因爲由於某些原因,行高看起來有點狹窄。Bootstrap 3中的默認行高是多少?它看起來像不是1.428

無論如何,Bootstrap 3文檔說它將默認行高屬性設置爲1.428。

但是,當我試圖將我的行高設置爲135%時,使用line-height: 135%;,我的博客上的行高看起來像擴展......很奇怪。

隨着一點點的爭論,我發現我的博客上的默認行高更像1.15 ...我不確定這個值來自哪裏 - 我沒有設置任何行高我所有的CSS設置。

所以我想知道是什麼讓Bootstrap 3的行高的默認值發生了變化?我有<div><div class="blog">,在內部div中,我放了很多<p>以便妥善安排我的博客文章。除此之外,我認爲我沒有相關的東西。

所以我的問題是,

  1. 什麼決定行高的價值?

  2. 爲什麼Boostrap 3的默認行高1.428被改變了?

  3. 約1.15值被覆蓋的假設原因是什麼(特別是它的價值 - 它沒有設置爲1,但約爲1.15 ...)。

我使用HTML5和CSS3和Bootstrap 3

[更新]

我發現,引導的路線,高度由我自定義的CSS設置覆蓋,特別是這樣的:

body 
    font: 16px "Lucida Grande", Helvetica 
    text-align: center 
    background-color: aliceblue 

但是,爲什麼line-height被上述設置覆蓋?我不會觸及與行高屬性相關的任何內容。

對於您的信息,我的行高屬性現在設置爲normal。不知道爲什麼它恢復。

+0

不知道你的css和html代碼是不可能的。但是您始終可以檢查開發人員工具以查看哪些規則以及以何種順序應用於元素,以及哪些規則會覆蓋引導程序默認值。 (你可能也需要通過父母) –

回答

3

我終於拿到了原因是在這裏。font: 16px "Lucida Grande", Helvetica行使line-height屬性恢復爲normal,因爲它將所有與字體相關的設置設置爲一個,並且由於我沒有將line-height分配給該屬性,因此它假定默認normal並覆蓋了從Bootstrap繼承的值。所以用下面的代碼替換該行解決了問題:

body 
    font-size: 16px 
    font-family: "Lucida Grande", Helvetica 
1

什麼決定了行高的價值?

如果您對矯正行高用量少,它的計算。默認爲 body {line-height: 1.428571429}; (請參閱CSS文件)

最後一個應用的CSS將覆蓋前一個值。 所以你的CSS文件順序應該是
bootsrap.css
引導-theme.css(如果有的話)
myownstylesheet.css

相關問題