引导：在标签中的图像搞砸了其他标签显示

Question

嗯，我想把一个图像左侧的导航选项卡，但它似乎是不对的。选项卡现在对齐到图像的顶部，而我想要相反，选项卡应该对齐到图像的底部。你可以看到屏幕截图它是如何搞砸了更多的细节：

下面是HTML代码，我与引导使用，任何人都知道如何解决此显示问题？

<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> 

Answer 1

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