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

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

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