html - 我可以使用 Bootstrap 中的 .row 和 .col 制作菜单吗？

Question

我试图使用 bootstrap 中的 cols 制作一个菜单。类似这样的东西:

http://i.stack.imgur.com/55xst.png

但我认为这不是最好的方法，因为当我尝试在 Wordpress 中实现时发现了很多麻烦..

知道如何以正确的方式做到这一点吗？

这是我的 code

HTML:

<div class="container main-menu">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-3 col-menu logo">
            <div class="item-menu">
                <figure>
                    <img src="http://www.sdi-inc-usa.com/image/35012580_scaled_116x87.jpeg" alt="">
                </figure>
            </div>
        </div>

        <div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
            <div class="item-menu">
                <div class="txt-main-menu">
                    <a href="#">lorem ipsum</a>
                </div>
            </div>
        </div>

        <div class="clearfix visible-xs-block"></div>

        <div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
            <div class="item-menu">
                <div class="txt-main-menu">
                    <a href="#">lorem ipsum & lorem ipsum</a>
                </div>
            </div>
        </div>

        <div class="col-xs-6 col-sm-6 col-md-3 col-menu text-center">
            <div class="item-menu">
                <div class="txt-main-menu">
                    <a href="#">lorem ipsum lorem ipsum lorem ipsum</a>
                </div>
            </div>
        </div>          
    </div>
</div>

CSS:

.main-menu {
    margin-top: 40px;
}

.main-menu > .row > .logo {
    text-align: left!important;
}

.main-menu > .row > .col-menu > .item-menu {
    background: #f2f2f2;
    padding: 10px;
    height: 107px;
    font-size: 1.375em;
    position: relative;
}

.main-menu > .row > .col-menu > .item-menu:hover {
    background: #bcd22c;
}

.txt-main-menu > a {
    font-family: 'museo-700';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 25px 25px;
    text-decoration: none;
    color: #565656;
}

.col-menu {
    padding-left: 0px; 
    padding-right: 5px;
    padding-bottom: 5px;
}
/** END Main Menu - LOGO*/


@media screen and (max-width: 767px) {
    div.col-menu:nth-child(2n+3),
    div.col-news:nth-child(2n+3),
    div.col-menu:nth-child(2),
    div.col-news:nth-child(2) {
        padding: 0;
    }

    .col-grid {
        padding-right: 0;
    }
}

谢谢

Answer 1

我建议您使用“导航栏”组件。它是为此类事物而构建的。

http://getbootstrap.com/components/#navbar