垂直引导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

回答

相关问题