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

jquery - ReferenceError: CKEDITOR is not defined -

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

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