UI-bootstrap отзывчивый вкладки

Question

Вот мой табсет

<div class="xtraSpace">

    <uib-tabset class="panel-tabs tab-heading">
      <uib-tab heading="Documents"></uib-tab>
      <uib-tab heading="Reates"></uib-tab>
      <uib-tab heading="Project Team"></uib-tab>
      <uib-tab heading="Drawdown"></uib-tab>
      <uib-tab heading="Opening WIP"></uib-tab>
      <uib-tab heading="Third Party Resales"></uib-tab>
      <uib-tab heading="Third Party Costs"></uib-tab>
      <uib-tab heading="Activities"></uib-tab>
      <uib-tab heading="Billing Details"></uib-tab>
      <uib-tab heading="Purchase Orders"></uib-tab>
      <uib-tab heading="Profile History"></uib-tab>
      <uib-tab heading="Cloud Usage"></uib-tab>
      <uib-tab heading="Service Catalogues"></uib-tab>
    </uib-tabset>

  </div>

Что происходит, так это то, что последняя вкладка, Каталоги Сервисов, собирается в новой строке, вместо того, чтобы находиться с другой в той же строке, как показано здесь. Расположение вкладок Как я могу изменить размер вкладок, или есть что-то, что я могу сделать, чтобы сделать вкладку адаптивной?

Большое спасибо.