使用 Bootstrap 创建垂直按钮答案

【问题标题】：Create vertical buttons using Bootstrap使用 Bootstrap 创建垂直按钮
【发布时间】：2019-08-25 15:34:32
【问题描述】：

我想在我的仪表板上创建五个按钮，但我目前拥有的并不理想。我想在一列中创建五个堆叠按钮。

            <div class="row">

                    <div class="col-xs-6 col-sm-2">
                        <button type="button" class="btn btn-primary active btn-lg btn-block cari" value="all"> All</button>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <button type="button" class="btn btn-primary active btn-lg btn-block cari" value="1">Site A</button>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <button type="button" class="btn btn-primary active btn-lg btn-block cari" value="3">Site B</button>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <button type="button" class="btn btn-primary active btn-lg btn-block cari" value="4">Site C</button>
                    </div>
                    <div class="col-xs-6 col-sm-2">
                        <button type="button" class="btn btn-primary active btn-lg btn-block cari" value="2">Site D</button>
                    </div>

            </div>
            </div>
        </div>

    </div>
</div>
</div>

【问题讨论】：

请阅读文档。 getbootstrap.com/docs/4.3/components/button-group/…

标签： php laravel twitter-bootstrap-3 bootstrap-4

【解决方案1】：

<div class="btn-group-vertical">
    <div class="col-md-12 mb-1">
        <button type="button" class="btn btn-primary btn-block">All</button>
    </div>
    <div class="col-md-12 mb-1">
        <button type="button" class="btn btn-primary btn-block">Site A</button>
    </div>
    <div class="col-md-12 mb-1">
        <button type="button" class="btn btn-primary btn-block">Site B</button>
    </div>
    <div class="col-md-12 mb-1">
        <button type="button" class="btn btn-primary btn-block">Site C</button>
    </div>
    <div class="col-md-12 mb-1">
        <button type="button" class="btn btn-primary btn-block">Site D</button>
    </div>
</div>

【讨论】：

这是用于引导程序 3 中的 5 个网格列？

【解决方案2】：

您可以使用 bootstrap 提供的垂直按钮组功能。 https://getbootstrap.com/docs/4.3/components/button-group/

【讨论】：

【解决方案3】：

<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>

试试这个并尝试去引导文档，你可以在那里找到所有内容。

【讨论】：

【解决方案4】：

 <div class="row">
                      <div class="col"><button type="button" class="btn btn-primary btn-sm" value="all" Style="width: 200px;"> ALL</button></div>
                      <div class="col"><button type="button" class="btn btn-primary btn-sm" value="1" Style="width: 200px;"> SITE A</button></div>
                      <div class="col"><button type="button" class="btn btn-primary btn-sm" value="3" Style="width: 200px;"> SITE B</button></div>
                      <div class="col"><button type="button" class="btn btn-primary btn-sm" value="4" Style="width: 200px;"> SITE C</button></div>  
                      <div class="col"><button type="button" class="btn btn-primary btn-sm" value="2" Style="width: 200px;"> SITE B</button></div>
                    </div>

【讨论】：