使标签在较小的屏幕上响应答案

【问题标题】：Make tabs responsive on smaller screens使标签在较小的屏幕上响应
【发布时间】：2019-08-22 08:10:02
【问题描述】：

我有以下标签，我想让它们在较小的屏幕上响应。目前，当我缩小屏幕时，最后一个选项卡会消失。最好的情况是......当在较小的屏幕中，标签将开始堆叠在第一个屏幕下方。关于如何实现这一点的任何想法？

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

【问题讨论】：

标签： javascript css twitter-bootstrap sass

【解决方案1】：

有多种方法可以处理网页响应：

1.) 使用flex view 使其根据页面大小进行缩放。但这并不能维持太多，因为超过一个点文本开始溢出容器。

2.) 使用media queries 更改页面不同大小的页面布局。 Reference

【讨论】：

感谢@varun agarwal 的回复，我会试一试告诉你！

【解决方案2】：

原来这很简单...我只需要从以下删除高度：

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

【讨论】：