Question

我有一个下拉菜单并使用

class = dropdown-menu

下拉菜单会在右侧网站上占用额外空间。如果我将屏幕缩小（或使用移动设备），则右侧网站上可能没有任何空间。在这种情况下，我可以使用

class = dropdown-menu-right

使用左侧网站上的空格。我的问题是，有没有办法检测屏幕的大小，并在此基础上呈现一个html模板与上述两个选项之一？谢谢卡尔

Answer 1

使用媒体查询的解决方案仅限css

注意：全屏运行代码并尝试缩小屏幕

＆＃13;

@media (min-width: 768px) {
  .one {
    width: 30px;
    height: 30px;
    background-color: red
  }
}
@media (max-width: 768px) {
  .two {
    width: 30px;
    height: 30px;
    background-color: yellow
  }
}

＆＃13;

<div class="one two "></div>

＆＃13;

看到这个答案：https://stackoverflow.com/a/33209805/4696809在这个答案运行片段全屏你可以看到菜单，如果你减少窗口大小菜单将消失，按钮将出现，即使我正在改变中心部分也取决于窗口大小

使用Jquery

注意：全屏运行代码并尝试缩小屏幕并查看控制台和div。如果你减少屏幕宽度div颜色会改变。

＆＃13;

$(document).ready(function() {
  $(window).resize(function() {
    var width = $(window).width()
    console.log($(window).width())
    if (width > 786) {
      console.log("BIg")
        $('.first').removeClass('new')
    } else if (width < 786) {
      console.log("small")
       $('.first').addClass('new')
    }
  });
});

＆＃13;

.first {
  width: 30px;
  height: 30px;
  background-color: red;
}
.new{
  background-color: yellow;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"></div>

＆＃13;

当屏幕太小时，bootstrap下拉菜单

1 个答案: