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

Question

好的，我有一个问题还没解决。

所以，基本上我正在使用 bootstrap 并且我正在尝试为用户创建一个部分，如果他想注册的话。

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

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

有什么办法可以解决吗？

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

为媒体最大宽度 4xx 像素添加下拉菜单后 css。

Answer 1

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

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

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

}

自定义最大宽度值，这只是一个想法。

您总是可以通过查看未打包的 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;
 }
}