Bootstrap 4.0按鈕組的Beta對齊

Question

我有<div>我已經在Bootstrap 4.0中聲明瞭我正在使用填充一行按鈕來填充水平div。我試着聲明btn-group元素都<buttons>和<a role="button">，但無論哪種方式我試試，我得到了最左邊的按鈕失準：

使用<a>辦法，我聲明這樣的DIV：

<div class="btn-group btn-group-justified" id="hours-and-location"> 
    <a href="#" class="btn btn-secondary btn-block" role="button">button</a> 
    <a href="#" class="btn btn-secondary btn-block" role="button">button</a> 
    <a href="#" class="btn btn-secondary btn-block" role="button">button</a> 
</div> 

聲明爲<buttons>看起來是這樣的：

<div class="btn-group btn-group-justified align-self-center" id="hours-and-location"> 
    <button type="button" class="btn btn-secondary btn-block h-100">Button 2</button> 
    <button type="button" class="btn btn-secondary btn-block h-100">Button 2</button> 
    <button type="button" class="btn btn-secondary btn-block h-100">Button 3</button> 
</div> 

我試過設置邊距，填充，添加！在CSS中很重要，我已經通過了大量的CSS帖子。我查看了Firefox檢測工具中的元素，我看不出爲什麼它們不一致。

我歡迎其他想法：如何解決這個問題。在一天結束時，我只想要一些按鈕來填充div。如果有一種更簡單的Bootstrap方法來實現它，而不會覆蓋大量的CSS，那麼我就會全神貫注。謝謝你的閱讀。

當我輸入這個，我忽略添加我的CSS和問題突然出現沒有我的CSS（所以我浪費了很多時間調試CSS）。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<!-- Bootstrap CSS --> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> 
 
<!-- Font Awesome --> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 
<br> 
 
<br> 
 
<br> 
 
<section class="container-fluid"> 
 
    <div class="row vertical-center"> 
 
    <div class="container-fluid"> 
 
     <!-- Main jumbotron for a primary marketing message or call to action --> 
 
     <div class="container-fluid"> 
 
     <!-- <div class="row my-auto"> --> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 

 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div class="btn-group btn-group-justified align-self-center" id="hours-and-location"> 
 
       <button type="button" class="btn btn-secondary btn-block h-100">Button 2</button> 
 
       <button type="button" class="btn btn-secondary btn-block h-100">Button 2</button> 
 
       <button type="button" class="btn btn-secondary btn-block h-100">Button 3</button> 
 
      </div> 
 
      <!-- <div class="btn-group btn-group-justified" id="hours-and-location"> 
 
      <a href="#" class="btn btn-secondary btn-block" role="button">button</a> 
 
      <a href="#" class="btn btn-secondary btn-block" role="button">button</a> 
 
      <a href="#" class="btn btn-secondary btn-block" role="button">button</a> 
 
     </div> --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

的垂直對齊是因爲btn-block類的過 - 從刪除btn-block你的按鈕的所有。

btn-block是爲button s表示低於其他再來一個（因此有一個默認margin-bottom它們之間） - 見下文文檔摘錄：

創建塊級別的按鈕，是跨越全一個 家長的寬度 - 通過添加.btn塊。

bootstrap-4

同樣對於按鈕的包裝，align-self-center具有如它是指用於柔性物品（父不是無論是在代碼中的flexbox）沒有意義。它應該被分配到每個 flex項目，或者你可以只給algin-items-center類。

請參見下面的演示：

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 
<!-- Bootstrap CSS --> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"> 
 
<!-- Font Awesome --> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 
 

 

 
<br> 
 
<br> 
 
<br> 
 
<section class="container-fluid"> 
 
    <div class="row vertical-center"> 
 
    <div class="container-fluid"> 
 
     <!-- Main jumbotron for a primary marketing message or call to action --> 
 
     <div class="container-fluid"> 
 
     <!-- <div class="row my-auto"> --> 
 
     <div class="row"> 
 
      <div class="col-sm-4"> 
 

 
      </div> 
 
      <div class="col-sm-8"> 
 
      <div class="btn-group btn-group-justified align-items-center" id="hours-and-location"> 
 
       <button type="button" class="btn btn-secondary h-100">Button 2</button> 
 
       <button type="button" class="btn btn-secondary h-100">Button 2</button> 
 
       <button type="button" class="btn btn-secondary h-100">Button 3</button> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>