Question

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

enter image description here

HTML code：

  <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

非常感谢，我对此很新，抱歉，如果我的问题很愚蠢！

等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等等。

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

使自举垂直按钮适合屏幕高度

1 个答案: