css - 围绕中心品牌形象包装 Bootstrap 导航栏列表项

Question

我整晚都在搞这个，没有解决办法。我正在使用 bootstrap 2.32（对于 joomla 模板，尚不支持 BS3），并且我将拥有动态数量的列表项。我需要将列表项居中，但也需要在中心 .brand img 的左侧和右侧均等地包裹。我可以把它分解成单独的菜单，但这有什么好玩的。所以我首先有一个Bootply用于测试目的。我愿意接受任何实现这一目标的建议。

Answer 1

您可以使用后端或 javascript 将图像移动到列表的中心：

<script>
var $nav = $('.nav li');
var $middle = $nav.eq(Math.ceil($nav.length/2));
var $liWrappedImg = $('<li></li>').append($('.brand'));
$middle.before($liWrappedImg);
</script>