Сделайте вкладки отзывчивыми на небольших экранах

Question

У меня есть следующие вкладки, и я хотел бы сделать их адаптивными, когда на маленьких экранах.В настоящее время последние вкладки исчезают, когда я уменьшаю размер экрана.Наилучший сценарий был бы ... когда на маленьких экранах вкладки начнут складываться ниже первых.Есть идеи как это реализовать?

(function() {
  $(function() {
    var toggle;
    return toggle = new Toggle('.toggle');
  });

  this.Toggle = (function() {
    Toggle.prototype.el = null;

    Toggle.prototype.tabs = null;

    Toggle.prototype.panels = null;

    function Toggle(toggleClass) {
      this.el = $(toggleClass);
      this.tabs = this.el.find(".tab");
      this.panels = this.el.find(".panel");
      this.bind();
    }

    Toggle.prototype.show = function(index) {
      var activePanel, activeTab;
      this.tabs.removeClass('active');
      activeTab = this.tabs.get(index);
      $(activeTab).addClass('active');
      this.panels.hide();
      activePanel = this.panels.get(index);
      return $(activePanel).show();
    };

    Toggle.prototype.bind = function() {
      var _this = this;
      return this.tabs.unbind('click').bind('click', function(e) {
        return _this.show($(e.currentTarget).index());
      });
    };

    return Toggle;

  })();

}).call(this);

.toggle {
  font-family: arial, sans-serif;
}
.toggle .tabs {
  border-bottom: 1px solid grey;
  width: 100%;
  overflow: hidden;
  height: 36px;
  line-height: 36px;
}
.toggle .tabs .tab {
  float: left;
  background: white;
  color: #777777;
  height: 31px;
  margin: 2px 8px 0;
  padding: 0 8px;
  cursor: pointer;
}
.toggle .tabs .tab.active {
  color: #dd4b39;
  border-bottom: 3px solid #dd4b39;
}
.toggle .panels .panel {
  padding: 20px 10px;
  display: none;
}
.toggle .panels .panel:first-child {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle'>
  <div class='tabs'>
    <div class='tab active'>Tab 1</div>
    <div class='tab'>Tab 2</div>
    <div class='tab'>Tab 3</div>
    <div class='tab'>Tab 4</div>
  </div>
  <div class='panels'>
    <div class='panel'>Panel 1</div>
    <div class='panel'>Panel 2</div>
    <div class='panel'>Panel 3</div>
    <div class='panel'>Panel 4</div>
  </div>
</div>

Answer 1

Оказывается, это было очень просто ... Мне просто нужно было удалить высоту из следующего:

.toggle .tabs {
  border-bottom: 1px solid grey;
  width: 100%;
  overflow: hidden;
  height: 36px; ////////delete this here
  line-height: 36px;
}

Answer 2

Существуют различные способы управления отзывчивостью веб-страницы:

1.) Используйте flex view, чтобы масштабировать его в зависимости от размера вашей страницы.Но это мало что дает, потому что после некоторого момента текст начинает переполнять контейнер.

2.) Используйте media queries, чтобы изменить макет страницы при разных размерах страницы. Ссылка