问如何在导航链接之间设置一个带有品牌形象的引导导航条？

EN

    HTML:
    ...
    <nav class="container">
        <div class="row visible-xs text-center">
            <div class="col-xs-12">
                <a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <ul class="text-center">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Our Food</a></li>
                    <li class="hidden-xs"><a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a></li>
                    <li><a href="#">Book a Table</a></li>
                    <li><a href="#">Promotions</a></li>
                </ul>
            </div>
        </div>
    </nav>
    ...

    CSS:
        body {background-color: #333333;}
        nav {background-color: #000000;}
        nav ul {
            display: flex; 
            list-style-type: none; 
            padding-left: 0;  //in order to eliminate Bootstrap's built-in 40px padding
        }
        nav ul > li {margin: auto;} //N.B. don't alter the margin property, if you want some further adjustments, use padding!
        nav ul > li > a:link, :visited, :hover, :active {
            color: #ffffff; 
            text-decoration:none;
        }
        @media all and (max-width:767px) {
            nav a > img {margin: 20px auto;}
            nav ul {flex-direction: column;} //only if you want to change the default direction
        }