代码之家  ›  专栏  ›  技术社区  ›  Navin Gelot

如何通过自定义引导设置下拉按钮的宽度?

drop-down-menu css html
  •  -2
  • Navin Gelot  · 技术社区  · 6 年前 

    .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;
}
    <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>

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

    alle 只有三个字符,因此占用的空间较小,但按钮宽度应等于 Kartonnen brillen 文本

    这是我的名片 CSS 它使按钮大小根据内容选择而变化。它应该与内容的最大大小保持不变

    enter image description here

    3 回复  |  直到 6 年前
        1
  •  0
  •   Ram_UI    6 年前 

    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>
        2
  •  0
  •   CodeMeNatalie    6 年前

    最简单的方法是使下拉菜单与按钮的宽度相同(反之亦然)。只需指定按钮的宽度,并使用相同的宽度下拉列表的元素和包装菜单内的文本。 

    .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>

    我不建议您将按钮的宽度调整为下拉菜单。当你想创建一个响应性强的网站时,它会把你的布局搞得一团糟。

    另外,我建议你设计类而不是元素。

        3
  •  -1
  •   Sumit Kumar    6 年前 

    .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>
    推荐文章
    code-geek  ·  Jquery根据单选按钮选择隐藏或显示文本字段
    3 月前
    Jamie  ·  在CSS链接的文件名中添加Jinja占位符
    3 月前
    ptownbro  ·  重叠分区标签,同时保持以下所有分区和内容就位
    4 月前
    Luke Frost IEng MIMechE  ·  Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示
    4 月前
    Reegan  ·  使用Angular ngFor指令在html中渲染嵌套对象值
    4 月前
    wqyutv  ·  当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?
    4 月前
    user29519291  ·  为不同的变量创建一个带有可重用Click函数的简单菜单
    4 月前
    Gukkey  ·  在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?
    4 月前
    Lorenzo Bertolaccini  ·  在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组
    4 月前
    john Rizzo  ·  按钮背景颜色、悬停和活动状态存在问题
    4 月前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号