Bootstrap 3响应式精灵导航

Question

我有一个客户端给了我一个psd切片并放入bootstrap。在pds中，他们有导航栏的图像，而且形状奇特，所以我用它们制作了精灵导航栏。用css重新创建它是不可能的。

我的问题是他们至少没有回应。反正有没有使用媒体查询来调整它们每隔几个像素？

我的HTML

  <div class="col-md-8">
    <nav>
      <ul>
        <li><a class="about" href="#">About</a></li>
        <li><a class="products" href="#">Products</a></li>
        <li><a class="technology" href="#">Technology</a></li>
      </ul>
    </nav>
  </div><!--.col-md-8-->

和我的css

nav ul li{
  float: left;
  list-style-type:none ;
  text-indent:-9999em;
}

nav ul li a{
    background:url(../img/nav.png) no-repeat;
  display: block;
}

.about{
  background-position:0px 0px;  
  width:25em;  
  height:5em;  
}

.products{
  background-position:-25em 0;  
  width:9em;  
  height:5em;  
}

.technology{
  background-position:-34em 0;  
  width:13em;  
  height:5em;  
}

我尝试向他们添加min-height和min-width，但似乎没有效果。