bootstrap：选项卡中的图像与其他选项卡显示混乱

Question

好吧，我试图将图片放在导航标签的左侧，但似乎有些东西是不对的。标签现在对齐到图像的顶部，而我想要相反，标签应该对齐到图像的底部。您可以在屏幕截图中查看有关其如何搞砸的详细信息：

下面是我使用bootstrap的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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;