Question

我正在使用bootstrap创建一个wordpress主题，因此我使用了320press.com主题。我在页面顶部有一个主导航栏，其中包含以下内容：

主页
关于我们
服务
廊
联系我们
wordpress的搜索框

我需要使列表适合页面，默认布局是将它插入到彼此靠近的左侧。换句话说，我有6个项目，所以我需要每个项目都需要上课＆＃34; col-sm-2＆＃34;，所以每个项目都适合两列。

我写这段代码

<div class="navbar navbar-inverse">
   <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" title="<?php echo get_bloginfo('description'); ?>" href="<?php echo home_url(); ?>">Home</a>
    </div>

<div class="collapse navbar-collapse navbar-responsive-collapse main-bar">
 <?php wp_bootstrap_main_nav();?>

<?php //if(of_get_option('search_bar', '1')) {?>
<form class="navbar-form navbar-right" role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
 div class="form-group">
 <input name="s" id="s" type="text" class="search-query form-control" autocomplete="off" placeholder="<?php _e('Search','wpbootstrap'); ?>" data-provide="typeahead" data-items="4" data-source='<?php echo $typeahead_data; ?>'>
 </div>
 </form>
 <?php //} ?>
</div>

<!-- end .container -->
</div>

在CSS中，我写了以下内容

.main-bar li {
    padding-left: 75px;
    font-size: 1.2em;
}

它在宽屏幕上工作正常，但是在较小的情况下它没有，例如768px或甚至1024px。

如何制作包含少量项目的bootstrap导航栏适合所有页面

0 个答案: