Css 如何将引导下拉文本框或菜单置于按钮下方的中心位置？_Css_Html_Twitter Bootstrap 3

Css 如何将引导下拉文本框或菜单置于按钮下方的中心位置？

css html twitter-bootstrap-3

Css 如何将引导下拉文本框或菜单置于按钮下方的中心位置？,css,html,twitter-bootstrap-3,Css,Html,Twitter Bootstrap 3,我正在为导航栏上的按钮制作一个简单的下拉文本框。由于某些原因，文本不会下降到按钮下方。它出现在左边，挡住了品牌。然后我制作了下拉菜单位置：相对，现在它显示在右边，并向下扩展导航栏。我也试着改变它的边距，但什么都没有。我只想让它显示在按钮下面，导航栏下面。不知道为什么这不起作用基本上是直接从Bootstrap站点复制的，我正在适当地导入jquery、JS和css。我做错了什么 HTML 剧本埃瑟纽斯在HTML中，从中删除show；在CSS中，从中删除位置：相对。下拉菜单： /*导航*/

我正在为导航栏上的按钮制作一个简单的下拉文本框。由于某些原因，文本不会下降到按钮下方。它出现在左边，挡住了品牌。然后我制作了下拉菜单位置：相对，现在它显示在右边，并向下扩展导航栏。我也试着改变它的边距，但什么都没有。我只想让它显示在按钮下面，导航栏下面。不知道为什么这不起作用

基本上是直接从Bootstrap站点复制的，我正在适当地导入jquery、JS和css。我做错了什么

HTML 剧本


埃瑟纽斯

在HTML中，从

中删除

show

；在CSS中，从

中删除位置：相对。下拉菜单：

/*导航*/
.导航栏标题.导航栏品牌{
颜色：rgb（97100206）；
字号：2.0em；
}
navbar先生{
背景色：rgb（71,71,88）；
背景色：黑色；
身高：100%；
字体系列：“Alegreya Sans”，无衬线；
保证金：0；
/*证明内容：之间的空间*/
/*自对准：居中*/
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉菜单{
高度：120px；
宽度：150px；
}
.下拉按钮{
/*背景色：#4446ce*/
背景色：黑色；
颜色：rgb（163179）；
边框：.5px纯黑色；
浮动：左；
边缘顶部：9px；
}

切换导航
工作原理
点击
谢谢您的帮助！奇怪的是，它在您的代码片段中工作得很好，但在我的代码中却不行。我用的是Chrome浏览器，也在Firefox上试用过。奇怪。。。你有你的完整代码吗？也许把它放在一个密码笔里，这是一个正在发生的事情的密码笔：谢谢你看，我很感激。更新：刚刚意识到，虽然它仍然不能在codepen中工作，但它的行为有点不同。在代码笔中，框会弹出到左侧并覆盖导航。在我的浏览器中，它会弹出到右侧，并展开导航高度。但也许修复程序可以同时处理这两种行为……尝试添加display:inline块至。下拉列表。没用！但在codepen工作。哈哈哈wtf。也许我得从头开始
<nav class="navbar navbar-default">
  <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>
      <a class="navbar-brand" href="#">news</a>
    </div>

    <div class="dropdown show">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        How It Works
      </button>
      <div class="dropdown-menu" data-toggle="dropdown" aria-labelledby="dropdownMenuButton">
        <div class="dropdown-item"> Click </div>
      </div>
    </div>

  </div>
</nav>

/*NAV*/
.navbar-header .navbar-brand{
  color: rgb(97, 100, 206);
  font-size: 2.0em;
}


.navbar {
  background-color: rgb(71, 71, 88);
  background-color: black;
  height: 100%;
  font-family: 'Alegreya Sans', sans-serif;
  margin: 0;
  /*justify-content: space-between;*/
  /*align-self: center;*/
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  height: 120px;
  width: 150px;
  position: relative;
}

.dropdown button {
  /*background-color: #4446ce;*/
  background-color: black;
  color: rgb(163, 163, 179);
  border: .5px solid black;
  float: left;
  margin-top: 9px;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>AetherNews</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:900" rel="stylesheet">




</head>