防止具有导航类的元素折叠

Question

我使用bootstrap 3x构建页面布局。即使它最受欢迎，因为它是mobile first这个应用程序所针对的最小设备将是一台标准1366x768（如果我没有记错）分辨率及以上的笔记本电脑。

在这种情况下，引导程序是最好的解决方案是不可能的，因为我不是那些选择技术的人。

所以我现在所做的就是从我的标记中删除所有不需要的类，并且我将行为更改为我认为对标准网站来说更原生的内容。

我改变了我的导航栏：

   <div role="navigation">
      <div class="container second-navigation-container">
          <ul class="nav nav-pills nav-justified">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
      </div>
    </div>

但是当显示尺寸变得足够小时（调整窗口大小）我得到了这个

我理解的是具有小显示器的设备所需的行为，但我想要的只是将元素缩小到某种程度，就像它现在正在发生然后开始切断一边。像这样：

我已经对默认的bootstrap css进行了一些自定义，但是对于这个我不知道该寻找什么，以及如何更改它以获得我想要的东西。