Сделать вертикальные кнопки бутстрапа соответствуют высоте экрана

Question

У меня есть список вертикальных кнопок, как я могу сделать их подходящими для экрана? Как это:

HTML код:

<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