在Twitter Bootstrap中的全宽分割下拉按钮 [英] Full Width Split Dropdown Button in Twitter Bootstrap

问题描述

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

I have a place on my site which is using a bunch of button elements styled with btn-block (example from the Twitter Bootstrap Docs). I now want to switch some of them to split buttons (example), but I can't seem to get the split buttons and the normal buttons to be the same length.

我已经尝试过各种各样的事情，但我似乎找不到一个办法做到这一点。有没有人设法做到吗？请记住，我不想硬编码任何元素的宽度，如果我不必。 （注意，这包括不使用硬编码的百分比。）如果绝对必要，我可以为按钮的切换部分定义一个宽度（因为我知道只有一个单一的箭头字符），但是

I have experimented with all kinds of things, but I can't seem to find a way to do this. Has anyone ever managed to do it? Keep in mind that I do not want to hard-code the width of any elements if I don't have to. (Note that this includes not using hard-coded percentages either.) If it is absolutely necessary, I am OK with defining a width for the toggle part of the button (because I know there will only be a single arrow character in there) but want to specify as few "magic numbers" as possible in order to keep the code maintainable in the future.

推荐答案

包含下拉列表-lead in a container：

Wrap the dropdown-lead in a container:

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

这篇关于在Twitter Bootstrap中的全宽分割下拉按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！