Блог

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

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

#php #laravel #twitter-bootstrap-3 #bootstrap-4

#php #laravel #twitter-bootstrap-3 #bootstrap-4

Вопрос:

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

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

введите описание изображения здесь

Комментарии:

1. Пожалуйста, прочитайте документы. getbootstrap.com/docs/4.3/components/button-group /…

Ответ №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>

Комментарии:

1. это для 5 столбцов сетки в bootstrap 3?

Ответ №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>

попробуйте это и попробуйте перейти к документации bootstrap, вы можете найти все там.

Ответ №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>