如何通过自定义引导程序来设置下拉按钮的宽度？

Question

.upper

.selector-dropdown {
    padding-right: 60px;
}

.dropdown-menu, .selector-dropdown {
    width: auto;
    height: auto;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group>.btn:first-child {
    margin-left: 0;
}


.open>.dropdown-menu {
    display: block;
}
.dropdown-menu, .selector-dropdown {
    width: auto;
    height: auto;
}

.dropdown-menu {
    -webkit-box-shadow: none;
    border-radius: 1px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.dropdown-menu>li>a {
    font-size: 24px;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #909090;
    white-space: nowrap;
}

下图显示我的下拉按钮的宽度不等于ul.li.a类的宽度？

我只想要我的按钮宽度应该等于下拉内容宽度，该宽度可以是可变的，如示例图像<div class="dropdown open btn-group"> <button id="vanaf" role="button" aria-haspopup="true" aria-expanded="true" type="button" class="selector-dropdown dropdown-toggle btn btn-default">alle <span class="caret"></span> </button> <ul role="menu" class="dropdown-menu" aria-labelledby="vanaf"> <li role="presentation" class="active"> <a role="menuitem" tabindex="-1" href="#"> alle </a> </li> <li role="presentation" class=""> <a role="menuitem" tabindex="-1" href="#"> Metalen brillen </a> </li> <li role="presentation" class=""> <a role="menuitem" tabindex="-1" href="#"> Kunststof brillen </a> </li> <li role="presentation" class=""> <a role="menuitem" tabindex="-1" href="#"> Kartonnen brillen </a> </li> </ul> </div>中只有三个字符，因此它占用的空间较小，但是按钮宽度应等于alle文本的宽度

有可能实现吗？

这是我自定义的Kartonnen brillen，它使按钮的大小根据内容的选择而变化，它应该与最大内容大小保持不变

Answer 1

var w = $(".dropdown-menu").width();
$(".selector-dropdown").width(w-15);

.dropdown-menu, .selector-dropdown {
    width: auto;
    height: auto;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group>.btn:first-child {
    margin-left: 0;
}


.open>.dropdown-menu {
    display: block;
}
.dropdown-menu, .selector-dropdown {
    width: auto;
    height: auto;
}

.dropdown-menu {
    -webkit-box-shadow: none;
    border-radius: 1px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.dropdown-menu>li>a {
    font-size: 24px;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #909090;
    white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown open btn-group">
	<button id="vanaf" role="button" aria-haspopup="true" aria-expanded="true" type="button" class="selector-dropdown dropdown-toggle btn btn-default">alle 
		<span class="caret"></span>
	</button>
	<ul role="menu" class="dropdown-menu" aria-labelledby="vanaf">
		<li role="presentation" class="active">
			<a role="menuitem" tabindex="-1" href="#"> alle </a>
		</li>
		<li role="presentation" class="">
			<a role="menuitem" tabindex="-1" href="#"> Meta </a>
		</li>
		<li role="presentation" class="">
			<a role="menuitem" tabindex="-1" href="#"> Kuns</a>
		</li>
		<li role="presentation" class="">
			<a role="menuitem" tabindex="-1" href="#"> KartKartKartKartKart </a>
		</li>
	</ul>
</div>

Answer 2

最简单的方法是使下拉菜单的宽度与按钮的宽度相同（反之亦然）。只需指定按钮的宽度，然后使用相同的宽度下拉菜单的元素并将文本包装在菜单内即可。

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.open>.dropdown-menu {
  display: block;
}

.dropdown-menu,
.selector-dropdown {
  width: 150px;
  height: auto;
}

.dropdown-menu {
  -webkit-box-shadow: none;
  border-radius: 1px;
  width: 148px;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdownElement {
  display: list-item;
  text-align: -webkit-match-parent;
}

.dropdownElement>a {
  font-size: 24px;
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #909090;
  white-space: wrap;
}

<div class="dropdown open btn-group">
  <button class="selector-dropdown dropdown-toggle btn btn-default">alle 
		<span class="caret"></span>
	</button>
  <ul role="menu" class="dropdown-menu">
    <li role="presentation" class="dropdownElement active">
      <a role="menuitem" tabindex="-1" href="#"> alle </a>
    </li>
    <li role="presentation" class="dropdownElement">
      <a role="menuitem" tabindex="-1" href="#"> Metalen brillen </a>
    </li>
    <li role="presentation" class="dropdownElement">
      <a role="menuitem" tabindex="-1" href="#"> Kunststof brillen </a>
    </li>
    <li role="presentation" class="dropdownElement">
      <a role="menuitem" tabindex="-1" href="#"> Kartonnen brillen </a>
    </li>
  </ul>
</div>

我不建议您将按钮的宽度调整为下拉菜单。当您考虑创建响应式网站时，它可能会弄乱您的布局。

Ps。我也建议您样式化类而不是元素。

Answer 3

在这里，我在CSS的末尾添加了CSS，您可以通过比较CSS来删除不需要的CSS。

.selector-dropdown {
    padding-right: 60px;
}

.dropdown-menu, .selector-dropdown {
    width: auto;
    height: auto;
}

.btn-group, .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
    outline: 0;
}

.btn-group>.btn:first-child {
    margin-left: 0;
}


.open>.dropdown-menu {
    display: block;
}
.dropdown-menu, .selector-dropdown {
    width: auto;
    height: auto;
}

.dropdown-menu {
    -webkit-box-shadow: none;
    border-radius: 1px;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.dropdown-menu>li>a {
    font-size: 24px;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #909090;
    white-space: nowrap;
}

#vanaf{position:relative;}

.open > .dropdown-menu{position:absolute; width:100%; max-width:100%;}

.dropdown-menu{min-width:auto!important;}

.dropdown-menu > li > a{white-space:normal!important;}
#vanaf {
	width: 150px;
}

<div class="dropdown open btn-group">
	<button id="vanaf" role="button" aria-haspopup="true" aria-expanded="true" type="button" class="selector-dropdown dropdown-toggle btn btn-default">alle 
		<span class="caret"></span>
	</button>
	<ul role="menu" class="dropdown-menu" aria-labelledby="vanaf">
		<li role="presentation" class="active">
			<a role="menuitem" tabindex="-1" href="#"> alle </a>
		</li>
		<li role="presentation" class="">
			<a role="menuitem" tabindex="-1" href="#"> Metalen brillen </a>
		</li>
		<li role="presentation" class="">
			<a role="menuitem" tabindex="-1" href="#"> Kunststof brillen </a>
		</li>
		<li role="presentation" class="">
			<a role="menuitem" tabindex="-1" href="#"> Kartonnen brillen </a>
		</li>
	</ul>
</div>