spazio tra Bootstrap 3 pulsanti

Se metto diverse Bootstrap 3 pulsanti consecutive:spazio tra Bootstrap 3 pulsanti

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

v'è un piccolo spazio tra di loro. Da dove viene e come rimuoverlo senza usare float? Secondo Firebug e Chrome Inspector i pulsanti non hanno alcun margine applicato a loro.

fonte

2015-05-02 Nikola Obreshkov

La nuova riga tra i pulsanti causa effettivamente lo spazio. Osservare:

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

Ci è una regola tasto-gruppo che si può usare se si desidera che i tasti raggruppati visivamente: 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>

fonte

2015-05-02 22:36:21

E 'necessario evitare le nuove linee al fine di rimuovere questo spazio o non c'è un altro modo? –

@NikolaObreshkov È il modo * più semplice * ed è vero per quasi tutti i gruppi di controlli che si desidera raggruppare orizzontalmente. Come ho notato nella mia ultima modifica, BS ha uno stile di raggruppamento per i pulsanti, se è quello che stai cercando. –

In realtà, se i pulsanti sono flottati, non hanno questo spazio. È presente solo quando non sono flottanti. Voglio rimuovere lo spazio tra i pulsanti non flottati e quando applico il margine personalizzato tutti i pulsanti (fluttuanti e non flottati) per avere lo stesso spazio tra allora. Ora, grazie alla tua risposta, so come ottenere ciò. –

I credici Stile i tasti display:inline-block; o inline. Di default creano spazi se si dispone di carattere di nuova linea.

Quindi per rimuoverlo, mettere quei markup uno accanto all'altro senza carattere di nuova riga. Sarebbe un casino, ma si ottiene ciò che si vuole, senza avere uno stile float

Quindi fare in questo modo:

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

fonte

2015-05-02 22:36:52

spazio tra Bootstrap 3 pulsanti

risposta

Problemi correlati