使用Bootstrap创建垂直按钮

Question

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

            <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>

Answer 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>

Answer 2

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

Answer 3

 (X3, Y3), (X3, Y3 + DY), (XB - DX, YB), (XB, YB)

尝试一下并尝试去引导文档，您可以在其中找到所有内容。

Answer 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>