我的网站上有一个地方正在使用一堆button元素样式为btn-block (example http://jsfiddle.net/TQSk6/1/来自 Twitter Bootstrap 文档）。我现在想将其中一些切换为拆分按钮（example http://jsfiddle.net/eBJGW/2/），但我似乎无法使分割按钮和普通按钮具有相同的长度。
我尝试过各种各样的事情，但我似乎找不到一种方法来做到这一点。有人曾经成功做到过吗？请记住，如果不需要，我不想对任何元素的宽度进行硬编码。 （请注意，这也包括不使用硬编码的百分比。）如果绝对有必要，我可以为按钮的切换部分定义宽度（因为我知道那里只会有一个箭头字符）但是希望指定尽可能少的“幻数”，以便保持代码将来的可维护性。
将下拉引线包裹在容器中：
（注：此示例适用于 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
