如何使用Bootstrap在选项卡组件的末尾显示文本/按钮？
use*_*914 6 html javascript css twitter-bootstrap
我在<ul>标签中添加了一个文本和一个按钮,如下所示:
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Database</a></li>
<li role="presentation"><a href="#">Tasks</a></li>
<li role="presentation"><a href="#">Options</a></li>
<li role="presentation">Welcome, ${sessionScope.currentUser} <button type="submit" >Log out</button></li>
</ul>
</div>
</body>
结果是:
如果我将文本和按钮包裹在<a>标签内,则底线被推得太远.您可以看到"数据库"选项卡底部有一行.
我希望文本和按钮移动到选项卡组件的末尾,就像这个论坛的选项卡一样.文本"2 Answers"与选项卡"votes"具有相同的高度,位于选项卡窗格的边缘:
我知道我必须用JavaScript修改它,但我不知道该怎么做.
这是您的答案和结果。
您可以在这里查看http://jsfiddle.net/vyy3zszj/
或者只是采取下面
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<style type="text/css">
li.rightside {
float:right;
line-height:34px;
}
</style>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Database</a></li>
<li role="presentation"><a href="#">Tasks</a></li>
<li role="presentation"><a href="#">Options</a></li>
<li class="rightside" role="presentation">Welcome, CurrentUser <button type="submit" >Log out</button></li>
</ul>
</div>不知何故，此代码段中定义的CSS无效。所以我插入身体上方。仅供参考，您可以肯定使用内联样式。
如果我理解正确的话，您只希望最后 2 个<li>元素一直到右边，而剩下的元素一直到左边。<li>要完成将最后 2 个元素的样式设置为"float:right"
将此 HTML 替换为现有 HTML ：
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#">Database</a></li>
<li role="presentation"><a href="#">Tasks</a></li>
<li role="presentation" style="float:right;"><a href="#">Options</a></li>
<li role="presentation" style="float:right;line-height:45px;">Welcome, ${sessionScope.currentUser}<button type="submit" >Log out</button></li>
</ul>
</div>
</body>`
更新的代码，垂直对齐文本的方法有很多，您可以使用vertical-align, line-height, padding's 和margin's 。我调整了line-height将文本设置在中间
| 归档时间： |
|
| 查看次数： |
6364 次 |
| 最近记录： |