14

我在我的网站上有一个地方，它使用了一堆button样式的元素btn-block（来自 Twitter Bootstrap Docs 的示例）。我现在想将其中一些切换为拆分按钮（示例），但我似乎无法让拆分按钮和普通按钮的长度相同。

我已经尝试过各种各样的东西，但我似乎无法找到一种方法来做到这一点。有没有人设法做到这一点？请记住，如果不需要，我不想硬编码任何元素的宽度。（请注意，这也包括不使用硬编码百分比。）如果绝对必要，我可以为按钮的切换部分定义宽度（因为我知道那里只有一个箭头字符）但是希望指定尽可能少的“幻数”，以保持代码在未来的可维护性。

4

3 回答 3

7

将下拉引线包装在容器中：

（注意：此示例适用于 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>

于 2013-02-05T12:32:33.147 回答
5

我正在寻找同样的行为并找到了这个 flexbox 解决方案：http ://codepen.io/ibanez182/pen/MwZwJp

这是一个优雅的实现，它利用了该flex-grow属性。

只需将.btn-flex类添加到.btn-group您的 HTML 中。这就是您需要的所有 CSS：

.btn-flex {
    display: flex;
    align-items: stretch;
    align-content: stretch;
}

.btn-flex .btn:first-child {
    flex-grow: 1;
}

归功于笔的作者：Nicola Pressi

于 2016-08-06T16:02:25.843 回答
1

如果您将类 btn-block 添加到 .btn-group 元素并为下拉按钮元素提供 % 宽度，那么就可以了。

.dropdown-lead{
    width: 96%;
    box-sizing: border-box;
}
.dropdown-toggle{
    width: 4%;
    box-sizing: border-box;
}

这是一个例子：http: //jsfiddle.net/eBJGW/5/

于 2013-02-04T23:52:00.073 回答