html – 在Twitter Bootstrap中的全宽拆分下拉按钮

概述我在我的网站上有一个地方,它正在使用一些以btn-block设计的按钮元素(来自Twitter Bootstrap Docs的 example).我现在要切换其中一些分割按钮( example),但是我似乎无法使分割按钮和普通按钮的长度相同. 我已经尝试了各种各样的事情,但我似乎找不到办法.有没有人设法做到这一点？请记住,如果我不需要,我不想硬编码任何元素的宽度. (请注意,这包括不使用硬编码的百 我在我的网站上有一个地方,它正在使用一些以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  type="button">Block level button</button><div >  <div >    <a  href="#"><i ></i> User</a>  </div>  <a  data-toggle="dropdown" href="#"><span ></span></a>  <ul >    <li><a href="#"><i ></i> Edit</a>    </li>    <li><a href="#"><i ></i> Delete</a>    </li>    <li><a href="#"><i ></i> Ban</a>    </li>    <li ></li>    <li><a href="#"><i ></i> Make admin</a>    </li>  </ul>  <div>  </div>

总结

以上是内存溢出为你收集整理的html – 在Twitter Bootstrap中的全宽拆分下拉按钮全部内容，希望文章能够帮你解决html – 在Twitter Bootstrap中的全宽拆分下拉按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。