2015-05-02 17 views
5

Wenn ich mehr Bootstrap 3 Tasten in einer Reihe gelegt:Raum zwischen Bootstrap 3 Tasten

<button class="btn btn-default">Button 1</button> 
    <button class="btn btn-default">Button 2</button> 
    <button class="btn btn-default">Button 3</button> 

gibt es einen kleinen Raum zwischen ihnen. Woher kommt es und wie man es entfernt, ohne Schwimmer zu benutzen? Laut Firebug und Chrome Inspector haben die Schaltflächen keinen Rand.

Antwort

9

Der Zeilenumbruch zwischen den Schaltflächen verursacht tatsächlich den Platz. Beachten Sie:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>

Es ist ein Button-Gruppe Regel, die Sie verwenden können, wenn Sie die Tasten visuell gruppiert werden sollen: http://getbootstrap.com/components/#btn-groups

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="btn-group" role="group" aria-label="..."> 
 
    <button type="button" class="btn btn-default">Left</button> 
 
    <button type="button" class="btn btn-default">Middle</button> 
 
    <button type="button" class="btn btn-default">Right</button> 
 
</div>

+0

Ist es notwendig, die neuen Linien, um zu vermeiden, diesen Raum zu entfernen, oder es ist ein anderer Weg? –

+0

@NikolaOfreshkov Dies ist die einfachste Art und Weise und gilt für fast alle Steuerelemente, die horizontal gruppiert werden sollen. Wie ich in meinem letzten Schnitt bemerkt habe, hat BS einen Gruppierungsstil für Buttons, wenn Sie danach suchen. –

+0

Tatsächlich, wenn die Tasten floated sind, haben sie diesen Platz nicht. Es ist nur vorhanden, wenn sie nicht schweben. Ich möchte den Abstand zwischen den nicht schwebenden Schaltflächen entfernen und wenn ich benutzerdefinierten Rand anwenden alle Schaltflächen (floated und nicht-floated), um den gleichen Abstand zwischen dann zu haben. Dank Ihrer Antwort weiß ich, wie Sie das erreichen können. –

3

I glaube, yo Sie stylen Ihre Tasten display:inline-block; oder inline. Standardmäßig erstellen sie Leerzeichen, wenn Sie ein Zeilenvorschubzeichen haben.

Also, um es zu entfernen, legen Sie diese Markups nebeneinander ohne Zeilenumbruch char. Es wäre chaotisch bekommen, wird aber das bekommen, was Sie wollen, ohne float einen Stil mit

tun es also wie folgt aus:

<button class="btn btn-default">Button 1</button><button class="btn btn-default">Button 2</button><button class="btn btn-default">Button 3</button>