在Bootstrap中，同一個「流體」行中的兩個`span`行爲不相似。爲什麼？

我試圖自定義一個由LESS代碼驅動的「響應式」Bootstrap主題，並且遇到了一些我無法解決的問題。首先，讓我告訴你的代碼：在Bootstrap中，同一個「流體」行中的兩個`span`行爲不相似。爲什麼？

這裏的HTML：

<div class="row-fluid"> 
    <div class="span7"> 
     <div class="hero-unit"> 
      <h2 class="gw-tweak2">This is line 1.</h2> 
      <h1 class="gw-tweak2">This is (big) line 2.</h1> 
     </div> 
    </div> 
    <div class="gw-tweak3 span5"> 
     <img src="img/portrait-square-nobkgd-250sq.png" /> 
    </div> 
</div>

這裏的相關更少的代碼：

.hero-unit { 
    background-color: @backgd-color; 

    h2.gw-tweak2 { 
     color: lighten(@subhead-color, 6%); 
     font-size: 22px; 
    } 
    h1.gw-tweak2 { 
     color: darken(@subhead-color, 8%); 
     font-size: 44px; 
    } 
} 

div.row-fluid>div.gw-tweak3 { // gw: applies to the span4 div 
           // that contains the portrait img 
    float: left; 
}

我試圖避免的副作用，我的變化，否則可能通過縮小我的規則選擇器的類別「gw-tweak2」和「gw-tweak3」。（FYI，「gw-」在那裏，所以我可以快速找到我的更改。）

HTML代碼描述了我的網頁的水平切片。左側是Bootstrap所謂的「英雄單位」（將其視爲格式化文本框），右側是250x250像素的照片。

對於那些不知道「響應」意味着什麼的人來說，這意味着隨着網頁寬度的縮小，頁面的各種元素會自行調整大小和重新排列，以使得生成的頁面始終看起來不錯。（這樣，相同的網頁在計算機，平板電腦和智能手機上看起來可以接受）。

這是我想要的效果（在最適合臺式計算機的網頁尺寸範圍內）：作爲網頁寬度減小，英雄單位的高度增加。發生這種情況時，圖像向下移動，使其相對於英雄單位的高度垂直居中。

下面是實際發生的情況：有一段時間，圖像的垂直位置保持不變。然後，在某個時刻，圖像開始收縮，同時開始朝向穿過英雄單位的頂部邊界的虛擬水平線漂移（即，由該代碼定義的區域的開始）。

下面是一個與問題密切相關的觀察結果：當我使用Firebug突出顯示給定HTML標記「覆蓋」的區域時，我發現「span7」區域（英雄單位）和「span5」區域的高度不同。（我認爲Bootstrap會使它們都保持相同的高度 - 畢竟，「排液」div似乎代表了網頁的矩形切片。）另外，由於網頁變窄，「span5」元素收縮時會精確覆蓋img。

也許什麼都不能做;我見過一些網頁，說垂直居中一個元素不僅僅是HTML。但即使是關於Bootstrap如何按照我描述的方式行事的一些見解，也可以幫助我修改當前行爲，從而減少結果的發生。

來源

2013-03-29 Gregg Williams

可你http://jsfiddle.net/ –

創建演示不，我個人不知道如何使用的jsfiddle這樣做。對不起，我沒有說清楚，但模板使用LESS，這意味着超過500行的CSS。我只想對LESS文件進行更改。它看起來不像jsfiddle可以從LESS文件中工作。 –

然後[Codepen]（http://codepen.io/） – FelipeAls

他們不需要定義gw-tweak3，因爲結構已經設置爲浮動。只需要做的是使圖像寬度100％......

div.row-fluid > div.gw-tweak3 { 
    float: left; // Remove this 
    img { 
     width:100%; margin:10px 0; vertical-align:middle; 
    } // Add this 
}

來源

2013-03-29 07:00:53 SaurabhLP

感謝您的回覆。我試圖做的是讓'img'垂直居中。你添加的代碼會幫助你做到嗎？當我嘗試它時，沒有什麼區別。 –

垂直對齊img到div是通過使用邊距，向頂部和底部添加一些邊距，使高度自動，因爲它調整自身的寬度保持一個確切的比例...檢查關於代碼... – SaurabhLP

我'我花了兩個小時試圖讓Bootstrap + LESS在Codepen.io上工作，但沒有成功。我會嘗試你的建議，但是我幾乎沒有時間。謝謝。 –

在Bootstrap中，同一個「流體」行中的兩個`span`行爲不相似。爲什麼？

回答

相關問題