我在我的网站上有一个地方,它正在使用一些以btn-block设计的按钮元素(来自Twitter Bootstrap Docs的
example).我现在要切换其中一些分割按钮(
example),但是我似乎无法使分割按钮和普通按钮的长度相同.
我已经尝试了各种各样的事情,但我似乎找不到办法.有没有人设法做到这一点？请记住,如果我不需要,我不想硬编码任何元素的宽度. (请注意,这包括不使用硬编码的百分比.)如果绝对有必要,我可以通过定义按钮的切换部分的宽度(因为我知道那里只有一个箭头字符),但是希望尽可能少地指定“魔术数字”,以便将来保持代码的可维护性.
解决方法
将下拉线包裹在容器中：
(注：此示例适用于Bootstrap 2.x)
.dropdown-lead {
width: 100%;
}
.leadcontainer {
left: 0;
position: absolute;
right: 30px;
}
.dropdown-toggle {
width: 30px;
float: right;
Box-sizing: border-Box;
}
.fillsplit {
position: relative;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<button class="btn btn-block btn-primary" type="button">Block level button</button>
<div class="btn-group btn-block fillsplit">
<div class="leadcontainer">
<a class="btn btn-primary dropdown-lead" href="#"><i class="icon-user icon-white"></i> User</a>
</div>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a>
</li>
<li><a href="#"><i class="icon-trash"></i> Delete</a>
</li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a>
</li>
</ul>
<div>
</div>
