All geek questions in one place

How to display text / button at the end of a tab component using Bootstrap?

I added text and a button inside the <ul> as follows:

 <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>

And the result:

If I wrap the text and the button inside the <a> tag, the bottom line will be moved too far. You can see that there is a line at the bottom of the "Database" tab.

I want the text and button to move to the end of the tab component, like the tabs of this forum. The text "2 Answers" has the same height with the "votes" tab and is located at the edge of the tab bar:

I know that I need to change it using JavaScript, but I do not know how to do it.

+5
source share
2 answers

If I understand you correctly, you just want the last 2 <li> all right and the rest to stay all the way to the left. To style the last 2 <li> elements to "float:right"

replace this HTML with existing 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>`

UPDATED CODE. There are many ways to vertically align text, you can use vertical-align , line-height , padding and margin . I adjusted line-height to set the text in the middle

+1
source

Here is the answer and the result for you.

You can check it out here http://jsfiddle.net/vyy3zszj/

Or just pick it up

 <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>

Somehow certain css in this code fragment does not work. So I pasted over the body. FYI, you can use the inline style.

+4
source

Source: https://habr.com/ru/post/1206604/

More articles:


All Articles