适当的导航栏项目（带有文本的图像）定位

Question

我正在尝试制作引导导航栏（响应式），其中的项目将是该图像下具有正确单词（或两个）的一些图像：

ul class="nav navbar-nav ribonItemList">

<li>
    <a class="ribonItem" data-ajax="true" href="/Home/ChangeWeek?command=Previous">
        <img class="img-rounded ribonImage" id="ribonImg" src="/Images/weekprevious.gif" />
        Previous Week
    </a>
</li>

<li>
    <a class="ribonItem" data-ajax="true" href="/Home/ChangeWeek?command=Current">
        <img class="img-rounded ribonImage" id="ribonImg" src="/Images/week.gif" />
        Current Week
    </a>
</li>

<li>
    <a class="ribonItem" data-ajax="true" href="/Home/ChangeWeek?command=Next">
        <img class="img-rounded ribonImage" id="ribonImg" src="/Images/weeknext.gif" />
        Next Week
    </a>
</li>

结果我得到了：

如何格式化以获得有效的响应式布局？