在较小的显示中安装下拉菜单

Question

好的，我有一个我无法解决的问题。

所以，基本上我使用bootstrap，如果他想注册，我会尝试为用户创建一个部分。

问题是，如果我有iphone 3GS并想进入我的页面， 下拉菜单太大，无法放在屏幕上！ （如下图所示）

我添加的下拉菜单是来自bootstrap的。

有没有办法解决这个问题？

/ -------------------------------------- /

为媒体max-width 4xx px添加下拉菜单css后。

Answer 1

.dropdown菜单的最小宽度但不是最大宽度。它将是内容+填充的宽度。要限制小型设备的宽度，请执行以下操作。更正.dropdown菜单父级的宽度，然后使用Bootstrap CSS中使用的相同特性允许链接本身换行：

@media (max-width:480px) {
  .dropdown-menu {
    width:90%;
 }

  .dropdown-menu > li > a {
    white-space: normal;
 }

}

将max-width值设为自己的值，这只是一个想法。

通过查看解压缩的CSS，您始终可以看到选择器的行为方式。

Line 3423

Answer 2

尝试：

overflow: hidden;
position:absolute;
right: 0;
max-width:yourmaxwidth;

Answer 3

使用此css样式，它将起作用： -

@media (max-width:480px) {
  .dropdown-menu {
    width:90%;
    white-space:normal;
 }
}