gpt4 book ai didi

javascript - 如何使用 Bootstrap 在选项卡组件末尾显示文本/按钮?

转载 作者:太空狗 更新时间:2023-10-29 15:01:08 25 4
gpt4 key购买 nike

我在 <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”具有相同的高度,并且位于选项卡 Pane 的边缘:

我知道我必须用 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 不知何故不起作用。所以我插入了 body 上方。仅供引用,您当然可以使用内联样式。

关于javascript - 如何使用 Bootstrap 在选项卡组件末尾显示文本/按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26857569/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com