Bootstrap：将元素底部对齐不起作用

Question

我遇到了与此类似的问题：

Bootstrap 3 Align Text To Bottom of Div

除了它提出的解决方案在我的情况下不起作用。我的 HTML 是：

<header class="masthead">
    <a class="navbar-brand" href="index.php"><img src="logo.png" alt="My Logo"></a>
    <div class="container-fluid">
        <div class="navbar-right" id="nav_derecha">
            <ul id="lang">
                <li><a href=""><img src="es.png" alt="Español"></a></li>
                <li><a href=""><img src="en.png" alt="English"></a></li>
                <li><a href=""><img src="fr.png" alt="Français"></a></li>
                <li><a href=""><img src="de.png" alt="Deutsch"></a></li>
            </ul>           
            <ul id="login_area">
                Login | Register
            </ul>
        </div>
    </div>          
</header>

我的 CSS 是：

header.masthead {
    background-color: #103961;
    height: 82px;
    margin-bottom: 0px;
    box-shadow: none;
}    
header.masthead nav {
    background: #339966;
    border: 0px;
    box-shadow: none;
    /* max-width: 1100px; */
    margin-left: auto;
    margin-right: auto;
}    
.navbar-brand > img {
    width: 270px;
}


@media only screen and ( min-width: 768px ) {
    #nav_derecha {
        position: relative;
        }
    #login_area {
        position: absolute;
        bottom: 0;
        right: 0;
    }
}

#login_area li a{
    color:white !important;  
}

#lang  li {
    display: inline;
    }

使用 "position:absolute" 技巧，login/register 链接出现在语言栏的正上方。我希望语言栏显示在 upper-right 角上，其下方的登录区域与 header 的底部对齐。我该怎么做？

Answer 1

我想这样的东西就是您要找的东西：

.nav-holder{
   display:inline-block;   
   vertical-align:top;
}

#lang{
   -webkit-padding-start: 0; 
   margin:0;
}

http://jsfiddle.net/1w6xr92j/7/

需要制作块元素 inline-block 个元素，以便它们并排放置。

另外，我看到 webkit 默认在 ul 上添加了一些填充，所以我把它去掉了。

我们只需要垂直对齐到顶部就可以让链接位于顶部。

编辑：相对定位您的标头，然后您的容器流体绝对会包含您想要的链接。然后，您还可以设置 "right" 属性，使容器远离您想要的右侧。

如果您还想澄清什么，请告诉我。

Answer 2

我将你的 CSS 的两个部分更改为：

@media only screen and ( min-width: 768px ) {
    #nav_derecha {
        position: relative;
        }
    #login_area {
        position: absolute;
          text-align: right; /* used to say bottom:0; right: 0 -> you can remove this line too, if you wish */
    }
}

#login_area{ /* there is no li a  inside this ul, so I removed them from the css */
    color:white !important;  
}

See updated bootply

Bootstrap：将元素底部对齐不起作用

Bootstrap: align element to bottom doesn't work

html

css

twitter-bootstrap-3