垂直引導2.3.2

對齊文本（底部）所以我們可以說我有以下幾點：垂直引導2.3.2

<div class="row-fluid container"> 
    <div class="span2"> 
     <image of height 100px> 
    </div> 
    <div class="span10 inner"> 
     <span class="title">some title</span> 
    </div> 
    </div>

我怎樣才能的作風，拿到冠軍的span10 div的底部對齊？

UPDATE

請提供一個答案，將繼續引導的響應行爲完好。謝謝！

來源

2014-10-06 Abram

你能提供CSS？ – dippas 2014-10-06 22:58:28

沒有CSS正在工作..我只留下了一些類名來幫助。我已經改變它們以使其更容易 – Abram 2014-10-06 23:00:39

引導程序3中不存在'span10'。 – cvrebert 2014-10-07 01:34:52

以下給出您需要的樣式。

.move-down2 { 
    height: 200px; 
    border: 1px solid black; 
    position: relative; 
} 

.title { 
    bottom: 0px; 
    position: absolute; 
}

http://jsfiddle.net/nadeeth/6vmu0s6x/

來源

2014-10-06 23:00:36 Nadeeth

我試過了，但是當屏幕調整標題重疊圖像 – Abram 2014-10-06 23:02:15

如在這個，這個小提琴不會在引導響應式造型上下文 – Abram 2014-10-06 23:04:32

簡單：

.inner { 
    display:table-cell; 
    vertical-align:bottom; 
}

http://jsfiddle.net/xoetoduj/

來源

2014-10-06 23:05:22 BastianW

恐怕這不適用於我..也許另一個引導程序CSS衝突？ – Abram 2014-10-06 23:08:20

您的項目是否在線？給我們一個鏈接或更多的代碼:)我也在使用bootstrap，所以我想解決這個問題。 – BastianW 2014-10-06 23:12:24

使主DIV display:table;和孩子DIV display:table-cell;然後用vertical-align:baseline;或vertical-align:bottom;根據您的情況。

這通常有助於垂直對齊問題，您不能使用行高。

或者，如果所有圖像都是100px，則可以使用下面的其他方法。我用顏色來說明。

.row-fluid { 
    background-color:blue; 
} 
#yourimage { 
    background-color:green; 
    height:100px; 
    width:100px; 
    position:relative; 
} 
.span10 { 
    background-color:red; 
    position:absolute; 
    top:80px; 
}

來源

2014-10-06 23:08:17 freakyfirefly

我需要的東西不會導致引導程序的響應行爲 – Abram 2014-10-06 23:08:56

這不應該殺死任何響應。我一直都在使用它來將文本集中在div中以獲得完全響應的網站。沒有試過它與引導，但與我們的CSS工程。使用display：table;對組織良好的代碼沒有負面的響應效果，所以它應該可以正常工作。 – freakyfirefly 2014-10-06 23:14:42

我試過了，它不起作用。不知道爲什麼 – Abram 2014-10-06 23:20:37

我們可以使用垂直對齊屬性在CSS獲得底部

http://jsfiddle.net/jai17/a7n89zcq/

HTML：

<div class="row-fluid move-down"> 
    <div class="span2"> 
     <image of height 100px> 
    </div> 
    <div class="span10 move-down2"> 
     <span class="title">some title</span> 
    </div> 
    </div>

CSS：

.move-down2 { 
    border: 1px solid #000000; 
    height: 200px; 
} 
.title { 
    bottom: 0; 
    display: table-cell; 
    height: 200px; 
    vertical-align: bottom; 
}

來源

2014-10-07 04:33:13 Jaishankar

垂直引導2.3.2

回答

相關問題