使下拉列表的宽度等于其父级答案

【问题标题】：Make the width of the dropdown list equal to their parent使下拉列表的宽度等于其父级
【发布时间】：2017-08-15 11:10:45
【问题描述】：

我想并排放置一个按钮和一个下拉列表，所以我必须使用display: inline-block。然后我意识到很难使下拉列表的宽度等于它们的父级（即Version）； position: relative 和 width:100% 这样的方法不起作用。

有人知道怎么做吗？

JSBin

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <style>
    dropdown {
      position: relative
    }
    dropdown-menu {
      width: 100%
    }
  </style>
</head>
<body ng-app="app" ng-controller="Ctrl">
  <button type="submit" class="btn btn-primary" style="border-top-right-radius: 0px;border-bottom-right-radius: 0px;">
    Save</button><div class="dropdown" style="display:inline-block">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" style="border-top-left-radius: 0px; border-bottom-left-radius: 0px">Version
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li ng-repeat = "x in versions">
        <a href="#">{{x}}</a>
      </li>
    </ul>
  </div>
  <script>
    var app = angular.module('app', []);
    app.controller('Ctrl', ['$scope', function ($scope) {
      $scope.versions = [1, 2, 3, 4, 5];
    }])
  </script>
</body>
</html>

【问题讨论】：

我对你的问题感到困惑。您是在问如何使下拉菜单与按钮的宽度相同（Version），还是在问如何使菜单项通过按钮水平显示（“并排”）？
使下拉菜单与按钮Version 的宽度相同。我在问题中提到了Save，因为我担心我必须使用display: inline-block 会使问题复杂化...

标签： css twitter-bootstrap drop-down-menu

【解决方案1】：

在引导程序中，.dropdown-menu 具有 min-width 值。覆盖这个：

.dropdown-menu {
  min-width: 0;
  width: 100%;
}

demo

【讨论】：