Wordpress 如何使引导程序的导航栏（项目较少）适合整个页面

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

• 家
• 关于我们
• 服务
• 画廊
• 联系我们
• wordpress的搜索框

我需要使列表与页面匹配，默认布局是将其插入到彼此靠近的左侧。换句话说，我有6个项目，所以我需要每个项目都采用“col-sm-2”类，所以每个项目都可以放在两列中

我写这个代码

<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>

---

它在宽屏幕上运行良好，但在较小的屏幕上则不行，例如768px甚至1024px。

将代码剥离到最低限度（删除所有php），或者创建一个bootply或fsfiddle示例。一旦你在那里复制它，帮助你会更容易。但是我用php编写它，因为我需要php。单独使用html代码非常简单！

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