使引导垂直按钮适合屏幕高度

Posted 2023-03-06

【中文标题】使引导垂直按钮适合屏幕高度

【英文标题】：Make bootstrap vertical buttons fit screen height

【发布时间】：2015-01-12 20:44:55

【问题描述】：

我有一个垂直按钮列表，如何使它们适合屏幕？像这样：

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 的规则，再次抱歉！

【问题讨论】：

好的，您已经能够创建一个垂直按钮组，但是您自己尝试过什么来调整高度？

@MattD 我尝试使用height:100%; 创建一个 div 以包含按钮，但它们不适合屏幕高度

老实说，如果您要使用引导程序的组按钮功能，您将无法完成此操作。你可以改变宽度，但高度不会改变。您可能只需要制作单个按钮并想办法让它们扩展视口的整个高度。

【参考方案1】：

我收回我在评论中所说的话。

这是我能找到的最接近你的地方。你必须自己计算数学等等，但这应该会让你指向正确的方向。也可能只是 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);

FIDDLE

【讨论】：

谢谢，不过我会坚持使用btn-group，您知道如何从按钮上移除弯角吗？