Wie entferne ich diese Ränder zwischen meinen Bootstrap 4 Links?

Question

Ich bin Bootstrap 4 Inline-Block-Links implementieren und sie scheinen einen unsichtbaren Rand zwischen ihnen zu haben, die ich nicht zu entfernen scheinen kann.

Screenshot:

Codepen here.

Code:

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

Wie kann ich diese unsichtbaren Ränder loszuwerden?

Answer 1

Das Problem stellte sich heraus, der Zeilenumbruch in HTML sein, zwischen den Gliedern. Ich bin mir nicht sicher, ob es absichtlich oder irgendeine Art von Browser-Bug ist. Wie auch immer .. Entfernen des Zeilenumbruchs funktioniert:

<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

eine neue Klasse für die Schaltfläche Hinzufügen und

margin: 0 -4px 0 0; 

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

Answer 3

Das ist verwenden, da die Tasten als "inline-block" angezeigt werden.

Da ist ein Abstand zwischen ihnen, kein Rand. Sie können das Problem beheben, indem der Raum/Zeilenumbruch zwischen den einzelnen Tag zu entfernen:

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

Answer 4

Sie ein Button-Gruppe Bootstrap verwenden könnte je nachdem, was Sie letztlich zu tun suchen.

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

Siehe Docs

Arbeitsbeispiel:

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