Here is the screenshot of my tabs menu
But the tab menu items jumps to next line if it has more items
Code
<div class="row col-lg-12">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
......
</ul>
<div class="tab-content">
<!--Contents goes here -->
</div>
</div>
So how can i fits all memu items into a single line??
2
Answers
What you are looking for is what we call a scrollable tabbed menu, which enables you to click the left/right arrow to navigate through multiple tabs. You will will need to use jQuery and CSS to achieve this. Here’s a perfect example for you. Hopefully it’s what you are after.
http://www.codeply.com/go/bp/l2ChB4vYmC
You can extend it to number of columns you needs. It requires adding a less function.
A less variable allows to set column width in grid.less file:
Here is a code that i found useful to extend it to 18 columns: