Question

现在我具有如下所示的导航标签设计

  menu 1   menu 2    menu 3

但是，当屏幕较小时，导航选项卡的设计就会像

  menu 1    menu 2
   menu 3

如何使导航标签变为垂直？

我尝试使用一些jquery插件技术，但是当我将其组合到页面时，它根本无法工作

这是导航标签脚本

  <div class="col-md-4">
<!--Begin::Portlet-->     
<div class="m-portlet m-portlet--full-height ">
  <div class="m-portlet__head">
    <div class="m-portlet__head-caption">
      <div class="m-portlet__head-title">
        <h3 class="m-portlet__head-text">
          Title
        </h3>
      </div>
    </div>
    <div class="m-portlet__head-tools">
            <ul class="nav nav-pills nav-pills--brand m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm" role="tablist">

        <li class="nav-item m-tabs__item">
          <a class="nav-link m-tabs__link active" data-toggle="tab" href="#hour" role="tab" id="hour" value="hour" onClick="hour()">
          Hours
          </a>
        </li>
        <li class="nav-item m-tabs__item">
                    <a class="nav-link m-tabs__link" data-toggle="tab" href="#minutes" role="tab" id="minutes" value="minutes" onClick="minutes()">
                    Minutes
                    </a>
        </li>
        <li class="nav-item m-tabs__item">
          <a class="nav-link m-tabs__link" data-toggle="tab" href="#day" role="tab" id="day" value="day" onClick="day()">
          Days
          </a>  
        </li>
            </ul>
        </div>
  </div>
  <div class="m-portlet__body">
    <div class="tab-content">
  <div class="tab-pane active" id="minutes">
        <div id="chart_div2"></div>
      </div>
      <div class="tab-pane" id="hour">
        <div id="chart_div2"></div>
      </div>
      <div class="tab-pane" id="day">
        <div id="chart_div2"></div>
      </div>
    </div>
  </div>
</div>
<!--End::Portlet-->   
</div>

谢谢

Answer 1

您正在尝试使用JavaScript解决CSS问题。您想要的是使用CSS媒体查询并为不同的屏幕尺寸创建不同的样式。

如何使导航选项卡响应

1 个答案: