CODEWITHSUNDEEP
htmlcsstwitter-bootstraptabs
RS92
RS92

Reputation: 485

Why I can't set width for nav tabs

I have navigation in div size col-md-4 , and I have 6 tabs, I can't to aline all tabs.

I can aline when I change font-size of text tabs, thats not good solution for me.

I tried to set width for each tabs, but not working. How can I set width for some tabs to be small but second to be bigger.

Also i have padding when I hover on the end of navbar

https://i.sstatic.net/9gMZg.png

        <nav class="row">
            <ul class="nav nav-tabs">
                <li class="tab1"><a href="#"> <span class="glyphicon glyphicon-user"></span> Name &nbsp &nbsp<span class="glyphicon glyphicon-chevron-down"></span> </a></li>
                <li><a href="#"><span class="glyphicon glyphicon-flag"></span>Text Link </a> </li>
                <li><a href="#"> <span class="glyphicon glyphicon-envelope"></span> Message </a> </li>
                <li><a href="#"> <span class="glyphicon glyphicon-oil"></span>10 </a> </li>
                <li class="tab5"><a href="#"><span class="glyphicon glyphicon-asterisk"></span> </a> </li>
                <li><a href="#"><span class="glyphicon glyphicon-home"></span> </a> </li>
            </ul>



    </div>

CSS

.nav-tabs li .tab5{

    width:4%;
}

Upvotes: 1

Views: 6856

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9476

Your selector is wrong, you have to do this:

.nav-tabs li.tab5 {
    width: 4%;
}

The class .tab5 is on the li tag, therefore you have to connect them.

Working Example

UPDATE

If you want to fit all in one row, try playing with the padding, like this:

.nav>li>a {
    padding: 10px 3px;
}

Updated Example

Upvotes: 6

Related Questions