使引导程序垂直按钮适合屏幕高度
需求答案
我有一个垂直按钮列表，如何使它们适合屏幕？像这样 ：
HTML代码：
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-default">Button</button>
<button type="button" class="btn btn-default">Button</button>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
链接到JSFiddle
非常感谢，我对此很陌生，如果我的问题很愚蠢，对不起！
这就是等等等等等等等等我必须补充以适应SO的规则，再次抱歉！
亚光
我收回我在评论中说的话。
这与我能得到的差不多。您必须自己弄清楚数学和诸如此类的东西，但这应该使您指向正确的方向。也可能只是JSFiddle导致其不严格遵守输出窗口大小。
代替使用btn-group，使用btn-block。创建一个CSS类，将其宽度设置为所需的宽度，然后使用一些jQuery根据窗口或div的大小以某种方式确定高度，并使用某种数学方法来设置按钮的宽度与视口配合使用的高度。我的是完全任意的，您可以根据需要进行设置。
HTML：
<button type="button" class="btn btn-primary btn-block">Test1</button>
<button type="button" class="btn btn-primary btn-block">Test2</button>
<button type="button" class="btn btn-primary btn-block">Test3</button>
<button type="button" class="btn btn-primary btn-block">Test4</button>
<button type="button" class="btn btn-primary btn-block">Test5</button>
<button type="button" class="btn btn-primary btn-block">Test6</button>
CSS：
.btn-block {
width: 150px;
}
jQuery的：
var height = $(window).height();
var btnHeight = (height / 6) - 19;
$('.btn-block').height(btnHeight);
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
按钮垂直对齐引导程序
- 2
如何垂直引导类按钮？
- 3
使垂直菜单高度适合100％
- 4
Android GridView以适合屏幕高度
- 5
如何设置div的最小高度以适合屏幕？
- 6
更改宽度以便高度适合窗口屏幕？
- 7
引导程序分页按钮
- 8
如何扩展图像高度以适合整个屏幕？
- 9
引导程序行中的垂直居中按钮
- 10
列引导程序中间的垂直对齐按钮
- 11
适合图像引导程序的边框
- 12
在引导程序行中垂直对齐按钮组
- 13
如何使用引导程序垂直显示单选按钮
- 14
小于浏览器高度时垂直居中div（引导程序）
- 15
无法使用引导程序设置相对于div的屏幕高度的最大高度
- 16
如何使引导程序按钮与文本连续垂直对齐？
- 17
使垂直菜单高度适合100％
- 18
使引导站点适合多个屏幕
- 19
垂直对齐两个不同高度的右拉元素（引导程序）
- 20
更改宽度以使高度适合窗口屏幕？
- 21
如何使单元格高度适合屏幕
- 22
Bootstrap屏幕自动适合高度的内容
- 23
在引导程序行中垂直对齐按钮组
- 24
固定我的html的高度以适合屏幕
- 25
垂直按钮组内部的引导按钮组
- 26
引导程序<form>高度
- 27
如何设置div高度以适合屏幕CSS
- 28
引导程序4更改导航栏高度，导致导航栏项目未垂直居中
- 29
引导程序按钮格式
我来说两句