Jak wyśrodkować nieznany przycisk szerokości w obszarze początkowym bootstrap?

Question

Mam przycisk generowane przez backbone.js i jQuery.tmpl() i szerokość przycisku jest wariant. Chcę umieścić go w div div. Kod jest pokazany poniżej:

<div class="row"> 
    <div class="span6"> 
    <button class="btn primary large"> 
     BLABLABLA 
    </button> 
    </div> 
    <div class="span10"> 
    ... 
    </div> 
</div> 

Nie wiem jak zrobić przycisk wyśrodkowany w dziale.

Answer 1

Im nie guru CSS, ale to załatwia sprawę dla mnie (centra przycisk w span6):

<div class="row"> 
    <div class="span6" style="text-align:center"> 
    <button class="btn primary large"> 
     BLABLABLA 
    </button> 
    </div> 
</div> 

Więcej informacji na centrowanie can be found here.

Answer 2

Trochę późno, ale można użyć klasy paginacji skoncentrowane z bootstrap

<div class="span6 pagination-centered"> 
    <button class="btn primary large"> 
    BLABLABLA 
    </button> 
</div> 

Answer 3

Co o <a> tagi?

Jeśli masz przycisk znacznika <a>, inne podejścia nie będą działać, ponieważ a.btn ma atrybut float: left w źródle ładowania początkowego.

<div style="text-align: center;"> 
    <a href="#" class="btn">Button text</a> 
</div> 

Można to cofnąć na 2 sposoby.

Rozwiązanie 1

Dodaj niestandardowy plik mniej i importuj bootstrap.

bootstrap-custom.less

@import "bootstrap.less"; 
a.btn { 
    float: none !important; 
} 

A potem skompilować niestandardowe mniejszy plik, lub po prostu podać go w innym pliku CSS:

styles.css

a.btn { 
    float: none !important; 
} 

Rozwiązanie 2

Wystarczy zrobić inline za pomocą style="float: none;":

<div style="text-align: center;"> 
    <a href="#" class="btn" style="float: none;">Button text</a> 
</div> 

Answer 4

inne rozwiązanie

<div class="row-fluid pagination-centered"> 
<a href="#" class="btn btn-large">Button</a> 
    </div> 
<div class="clearfix"></div> 

Answer 5

miałem ten sam problem, mam owinięte w

<a class="btn btn-primary" href="#" role="button">Text Here</a> 

Stał

<div class="text-center"> 
<a class="btn btn-primary" href="#" role="button">Text Here</a> 
</div>