Question

我使用angular和bootstrap-ui。我有两列彼此相邻，右边的一列比左边有更大的高度，因为存在控件。我想要做的就是在右列中添加一些与左列底部对齐的文本，这应该很容易。我不会承认我与它斗争了多久。

看起来问题是左列本身是顶部对齐的。所以我有这样的事情：

*****************
*      * *       * 
* col 1* * col 2 *
******** *       *
         *       *
         *********

我想使col 1与行内col 2的底部对齐。从那里将col 1中的文本与col的底部对齐应该很容易。

我找到了许多假想的解决方案，但它们似乎无法发挥作用。最常见的是涉及覆盖CSS的显示和垂直对齐属性，但这样做似乎会以奇怪的方式搞乱行对齐。我已经看到col 1在col 2之后结束或者行缩小以不使用它的页面全宽。我试图覆盖元素的关键是搞乱引导程序。我相信这是因为大多数建议实际上并不是针对angular和bootstrap-ui。

我最接近工作的是设置显示：行的流体。这使得列的大小相同而不会干扰其余的外观和感觉。但是，我无法使用text-right或verticle-align将文本放在列右下角的col 1中。

如何让我的第一列中的文字与第2列的底部对齐？

Answer 1

如果尝试在引导容器中使用vertical-align，则可能会出现问题。即使您也尝试使用（父）display:table;然后使用display:table-cell;使用（子）。你失去了高度控制。

这里你最好的选择可能是我在 Fiddle 中设置的。

但是说...因为我们使用margin-top而当你将窗口调整到更小的屏幕尺寸时，你仍会遇到上边距的问题，正如你在Fiddle中看到的那样。

但是你可以通过使用Bootstrap lg, md, sm and xs来控制这一点，以保持文本排成一行，同样在Fiddle中设置这一点以显示如何控制这个问题。< / p>

调整窗口大小，我在小提琴中设置了大视图。

<html !DOCTYPE html>
<head>
<link rel="stylesheet"href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" >    
<style>
.block{
overflow: visible;
} 
.block-a {
margin-top:200px;
height:100px; 
}
.block-b {
height:300px; 
padding-top:200px;
overflow: visible;
}       
</style>

</head>

<body>

<div class="container col-lg-12"><br></div>
<div class="container col-lg-12 bg-warning block">
<div class="col-lg-3 col-lg-offset-2 bg-primary block-a "> Hello</div>
<div class="col-lg-3 col-lg-offset-1 bg-info block-b ">Great, lined up to  the left.</div>
</div>

<div class="container col-lg-12"><br></div>
<div class="container col-lg-12 bg-success block">
<div class="col-lg-3 col-lg-offset-2 col-md-3 col-md-offset-2 col-sm-3 col-  sm-offset-2 col-xs-3 col-xs-offset-1 bg-primary block-a "> Hello</div>
<div class="col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-2 col-sm-5 col-   sm-offset-2 col-xs-7 col-xs-offset-1 bg-info block-b ">Great, lined up to the    left.</div>
</div>    
</body>
</html>

bootstrap-ui

1 个答案: