像素大小减小时如何堆叠下拉菜单位置答案

【问题标题】：How to stack dropdown menu position when pixel size decreased像素大小减小时如何堆叠下拉菜单位置
【发布时间】：2015-07-02 15:48:09
【问题描述】：

如何使我的下拉菜单居中当屏幕尺寸减小时。我无法点击下拉菜单，因为它离中间太远了。

对不起我笨拙的英语语法和编码语言

这是代码

body {
  padding-top: 60px;
  padding-bottom: 40px;
}
.sidebar-nav {
  padding: 9px 0;
}
.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
  visibility: visible;
}
.dropdown:hover .dropdown-menu {
  display: block;
}
.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
  margin-top: 0;
}
.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px;
}
.navbar .sub-menu:after {
  border-top: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #fff;
  border-bottom: 6px solid transparent;
  left: 10px;
  top: 11px;
  left: -6px;
}

<!DCTYPE html>

<html>

<head>
  <meta charset="utf-8"></meta>
  <title>Lavin By Lycka</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link href="css/custom.css" rel="stylesheet">
  <script src="js/respond.js"></script>

  <style>
    .navbar {
      margin-top: 10%;
    }
  </style>


</head>

<body>

  <div class="navbar navbar-default row">
    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>

    </div>

    <div class="collapse navbar-collapse" id="collapse">

      <ul class="nav nav-justified">
        <li class=><a href="">home</a>
        </li>
        <li class="dropdown"><a data-toggle="dropdown" href="#">About <span class="caret"></span></a>

          <ul class="dropdown-menu">
            <li><a href="#">home</a>
            </li>
            <li><a href="#">home</a>
            </li>
          </ul>



        </li>
        <li><a href="">Service</a>
        </li>
        <li><a href="">Contact</a>
        </li>

      </ul>

    </div>
  </div>
  <!--container-->
  <!-- javascript -->
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

【问题讨论】：

标签： jquery html css twitter-bootstrap

【解决方案1】：

看看这个例子。

@media screen and (max-width: 768px) {
.navbar .navbar-collapse a {
    text-align: left;
    padding-left: 43%;
}
.dropdown-submenu a {
    padding-left: 44%;
}
.navbar .navbar-collapse .dropdown .dropdown-menu a {
    padding-left: 45%;
}}

您可以在此媒体查询中调整nav 链接，但是您需要调整它们是位于中心还是左侧，并根据需要调整填充和对齐方式。希望这会有所帮助。

.navbar {
  border-radius: 0px;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
}
.navbar .navbar-collapse {
  text-align: center;
}
.nav li a {
  border-right: 1px solid #ccc;
}
.dropdown li a,
.dropdown-menu li a {
  border-bottom: 1px solid #ccc;
}
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px 6px 6px 6px;
  border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropdown-submenu > a:after {
  display: block;
  content: " ";
  float: right;
  width: 0px;
  height: 0px;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0px 5px 5px;
  border-left-color: #cccccc;
  margin-top: 5px;
  margin-right: -5px;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0px 6px 6px;
  -moz-border-radius: 6px 0px 6px 6px;
  border-radius: 6px 0px 6px 6px;
}
@media screen and (max-width: 768px) {
  .center-block {
    float: right;
  }
  .nav {
    padding-left: 0;
  }
  .navbar-toggle {
    float: none;
  }
  .navbar-header {
    text-align: center;
  }
  .navbar-nav li a {
    text-align: center;
  }
  .nav li a {
    border-right: none;
  }
  .dropdown li a,
  .dropdown-menu li a {
    border-bottom: none;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>

          <ul role="menu" class="dropdown-menu">
            <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>

            </li>
            <li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>

            </li>
            <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i> Sent Items</a>

            </li>
            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>

            </li>
          </ul>
        </li>
        <li><a href="#">Shop</a>

        </li>
        <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>

          <ul role="menu" class="dropdown-menu">
            <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>

            </li>
            <li><a href="#"><i class="fa fa-pencil-square-o  fa-fw"></i> Drafts</a>

            </li>
            <li><a href="#"><i class="fa fa-paper-plane-o  fa-fw"></i> Sent Items</a>

            </li>
            <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>

              <li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>

                <ul class="dropdown-menu">
                  <li><a href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>

                  </li>
                  <li><a href="#"><i class="fa fa-folder-open-o  fa-fw"></i> Users</a>

                  </li>
                  <li><a href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>

                  </li>
                </ul>
              </li>
            </li>
          </ul>
        </li>
        <li><a href="#">Contact</a>

        </li>
        <li><a href="#">Blog</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

【讨论】：

先生，非常感谢，世界值得更多像你这样的人
无论如何，先生，当我使用“nav nav-justified”时，当我使用导航按钮时下拉菜单仍未居中:(有什么建议吗？
您的意思是移动切换按钮居中吗？再看看我的小提琴，看看你指的是不是这个。
感谢先生的回答，对不起我的英语不好，但我的意思是像这样imagebam.com/image/822f8e419652503 将导航栏居中，你能帮我如何创建那个边框吗？我很累问stackoverflow.com/questions/31213483/… 但在我添加 .element 后，我的下拉菜单中仍然没有边框
我更新了我原来的答案，应该是你工作的一个很好的基础。