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

Question

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

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

Answer 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