如何刪除我的Bootstrap 4鏈接之間的這些邊距？

Question

我正在執行Bootstrap 4內聯塊鏈接，它們之間似乎有一個不可見的邊距，我似乎無法刪除它們。

截圖：

Codepen here。

代碼：

<div> 
    <!-- There shoud be NO MARGIN between the links --> 
    <a href="#" class="btn btn-danger"> 
     Button A</a> 
    <a href="#" class="btn btn-secondary like-button"> 
     Button B 
    </a> 
</div> 

如何擺脫這些無形的利潤率？

Answer 1

原來，這個問題是在HTML中的線斷裂，鏈節之間。我不確定這是故意還是某種瀏覽器錯誤。無論如何..刪除分行工程：

<div> 
    <!-- There shoud be NO MARGIN between the links --> 
    <a href="#" class="btn btn-danger"> 
     Button A</a><a href="#" class="btn btn-secondary like-button"> 
     Button B 
    </a> 
</div> 

Answer 2

添加一個新類的按鈕，使用

margin: 0 -4px 0 0; 

codepen https://codepen.io/norcaljohnny/pen/BQqroO

Answer 3

這是因爲這些按鈕顯示爲 「inline-block的」。

它們之間有空間，而不是邊距。您可以通過刪除每個標籤之間的空間/換行符修正：

<button>first</button></button>second</button> 

Answer 4

你可以使用一個引導按鈕組這取決於你最終希望做。

<div class="btn-group" role="group" aria-label="Basic example"> 
    ...you buttons 
</div> 

參見Docs

工作實施例：

/*EXAMPLE CSS ONLY, NOT QUESTION RELATED*/ 
 

 
body { 
 
    padding-top: 50px; 
 
    text-align: center; 
 
} 
 
/*EXAMPLE CSS ONLY, NOT QUESTION RELATED*/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="btn-group" role="group" aria-label="Basic example"> 
 
    <a href="#" class="btn btn-danger">Button A</a> 
 
    <a href="#" class="btn btn-secondary like-button">Button B</a> 
 
</div>