我可以使用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

我建议你使用＆＃34; navbar＆＃34;零件。它是针对此类事物的目的构建。

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

Answer 2

我在网上发现了这个靴子到wordpress系列http://bootstrapwp.com/adding-bootstrap-menu-wordpress-theme/这是一个结合bswp的优秀课程。

第一步是添加自定义Walker菜单以创建WordPress主题的Bootstrap菜单。然后，我们将讨论如何将自定义菜单添加到我们的WordPress主题的标题和一些小的自定义选项。您还将学习如何确保菜单具有响应所需的所有标记并支持子菜单项。

在/ inc /目录中创建一个名为bootstrap-walker.php的新文件 在此文件中添加以下代码：

<?php
// Custom Walker Class for Bootstrap Menu
add_action( 'after_setup_theme', 'bootstrap_setup' );

if ( ! function_exists( 'bootstrap_setup' ) ):

    function bootstrap_setup(){

        class Bootstrap_Walker_Nav_Menu extends Walker_Nav_Menu {


            function start_lvl( &$output, $depth ) {

                $indent = str_repeat( "\t", $depth );
                $output    .= "\n$indent<ul class=\"dropdown-menu\">\n";

            }

            function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

                $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

                $li_attributes = '';
                $class_names = $value = '';

                $classes = empty( $item->classes ) ? array() : (array) $item->classes;
                $classes[] = ($args->has_children) ? 'dropdown' : '';
                $classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
                $classes[] = 'menu-item-' . $item->ID;


                $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
                $class_names = ' class="' . esc_attr( $class_names ) . '"';

                $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
                $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

                $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';

                $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
                $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
                $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
                $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
                $attributes .= ($args->has_children)        ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';

                $item_output = $args->before;
                $item_output .= '<a'. $attributes .'>';
                $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
                $item_output .= ($args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
                $item_output .= $args->after;

                $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }

            function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {

                if ( !$element )
                    return;

                $id_field = $this->db_fields['id'];

                //display this element
                if ( is_array( $args[0] ) ) 
                    $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
                else if ( is_object( $args[0] ) ) 
                    $args[0]->has_children = ! empty( $children_elements[$element->$id_field] ); 
                $cb_args = array_merge( array(&$output, $element, $depth), $args);
                call_user_func_array(array(&$this, 'start_el'), $cb_args);

                $id = $element->$id_field;

                // descend only when the depth is right and there are childrens for this element
                if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

                    foreach( $children_elements[ $id ] as $child ){

                        if ( !isset($newlevel) ) {
                            $newlevel = true;
                            //start the child delimiter
                            $cb_args = array_merge( array(&$output, $depth), $args);
                            call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
                        }
                        $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
                    }
                        unset( $children_elements[ $id ] );
                }

                if ( isset($newlevel) && $newlevel ){
                    //end the child delimiter
                    $cb_args = array_merge( array(&$output, $depth), $args);
                    call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
                }

                //end this element
                $cb_args = array_merge( array(&$output, $element, $depth), $args);
                call_user_func_array(array(&$this, 'end_el'), $cb_args);

            }

        }

    }

endif;

保存boostrap-walker.php文件 打开functions.php 在此文件的底部，您将要编写代码以包含我们的新bootstrap-walker.php文件。它应如下所示：

<?php
/**
 * The header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="content">
 *
 * @package bootstrapwp
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">

    <header id="masthead" class="site-header" role="banner">

    <nav role="navigation">
        <div class="navbar navbar-static-top navbar-default">
            <div class="container">
                <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="homepage"><?php bloginfo( 'name' ) ?></a>
                </div>

                <div class="navbar-collapse collapse navbar-responsive-collapse">
                    <?php

                    $args = array(
                        'theme_location' => 'primary',
                        'depth'      => 2,
                        'container'  => false,
                        'menu_class'     => 'nav navbar-nav navbar-right',
                        'walker'     => new Bootstrap_Walker_Nav_Menu()
                        );

                    if (has_nav_menu('primary')) {
                        wp_nav_menu($args);
                    }

                    ?>

                </div>
            </div>
        </div>           
    </nav>

    </header><!-- #masthead -->

注意：我还从此代码中删除了“跳到内容”链接。我将在下一个视频教程中讨论这个问题。 保存header.php文件 现在我们已经准备好了所有代码，我们可以从WordPress仪表板创建一个新菜单。登录到WordPress网站的后端（wp-admin），然后转到外观 - ＆gt;菜单 创建一个新菜单，选择并向菜单添加几个页面，并将其分配给主菜单主题位置。 重新加载WordPress的前端并使用你真棒的Bootstrap菜单进行游戏！

如果您想了解有关Walker课程的更多信息，可以阅读更多相关内容http://codex.wordpress.org/Class_Reference/Walker