Создание вертикальных кнопок с помощью Bootstrap - PullRequest
Новая
       18

Создание вертикальных кнопок с помощью Bootstrap

0 голосов
/ 04 апреля 2019

Я хочу создать пять кнопок на моей приборной панели, но то, что у меня сейчас есть, не идеально.Я хотел бы создать пять кнопок в одном столбце. 

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

enter image description here

Ответы [ 4 ]

1 голос
/ 04 апреля 2019 
<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>
0 голосов
/ 11 апреля 2019 
 <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>
0 голосов
/ 04 апреля 2019 
<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>

попробуйте это и попробуйте перейти к документации по начальной загрузке, вы можете найти все там.

0 голосов
/ 04 апреля 2019

Вы можете использовать функцию вертикальной группы кнопок, предоставляемую начальной загрузкой. https://getbootstrap.com/docs/4.3/components/button-group/

...