html - bootstrap: Image in tab messed up with other tab displays -


well trying put image left of nav tabs, seems isnt right. tabs align top of image, while want opposite, tabs should align bottom of image. can see screenshot more details of how messed up: enter image description here

below html code use bootstrap, know how solve display issue?

    <ul class="nav nav-tabs nav-justified">         <li class="nav nav-item"><img src="{$image}" class="img-responsive"></li>         <li id="atab1" class="nav-item"><a href="#tab1" data-toggle="tab" class="nav-link active">about</a></li>         <li id="atab2" class="nav-item"><a href="#tab2" data-toggle="tab" class="nav-link">posts</a></li>         <li id="atab3" class="nav-item"><a href="#tab3" data-toggle="tab" class="nav-link">goods</a></li>         <li id="atab4" class="nav-item"><a href="#tab4" data-toggle="tab" class="nav-link">services</a></li>         <li id="atab5" class="nav-item"><a href="#tab5" data-toggle="tab" class="nav-link">jobs</a></li>     </ul> 

.nav-item {    vertical-align: bottom;  }


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -