Enclose those li
into a ul
list and the class as list-inline
like this
<ul class="dropdown-menu">
<ul class='list-inline'>
<li><a href="#" id="">1</a>
</li>
<li><a href="#" id="">2</a>
</li>
<li><a href="#" id="">3</a>
</li>
<li><a href="#" id="">4</a>
</li>
<li><a href="#" id="">5</a>
</li>
</ul>
</ul>
Check this screenshot
Here is the JSFiddle
Updates1:
As I mentioned in comments, class: dropdown-menu
has the min-width as 160px
. Hence it is fixed to width. Try to override it.
Updates2:
As I mentioned in comments, bootstrap has some default style which can be overridden like
.dropdown-menu{
min-width: 200px;
}
Incase if you feel that it affects other elements then override using id
selector.
#Numberlist.dropdown-menu{
min-width: 200px;
}
Find the difference in this JSFiddle
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…