Come creare un pulsante Bootstrap a tutta larghezza?

Question

Questo è quello che ho adesso. Io non riesco a farlo diventare larghezza

Almost full width

Questo è il codice html. Ho già provato ad aggiungere la classe .btn-block ma ottengo gli stessi risultati come se usassi la larghezza: 100%; nel css. Forse il problema è con l'elemento genitore?

<article class="col-xs-12 col-md-4"> 
      <div class="label label-success price"><span class="glyphicon glyphicon-tag"></span>$39</div> 

      <div class="price-title"> 
       <h3>LOREM</h3> 

       <small>Lorem Ipsum</small> 
      </div> 

      <div class="price-content "> 
       <ul> 
        <li><h4>Item or Service # 1</h4></li> 
        <li><h4>Item or Service # 2</h4></li> 
        <li><h4>Item or Service # 3</h4></li> 
        <li><h4>Item or Service # 4</h4></li> 
        <li><h4>Item or Service # 5</h4></li> 
        <li><h4>Item or Service # 6</h4></li> 
       </ul> 

       <a href="#"><div class="btn btn-success">Sign Up</div></a> 
      </div> 
     </article> 

E questi sono gli stili

#tables{ 
color: white; 
text-align: center; 
margin: 15px 20px;} 


.price{ 
position: relative; 
top: 20px; 
font-size: 30px;} 

.price-content{ 
background-color: #E8E9EA; 
color: #69696A; 
padding-right: 50px; 
padding-top: 30px; 
height: 350px; 
margin-bottom: 80px; 
width: 100%;} 

.btn{ 
border-radius: 0px; 
font-size: 20px; 
font-weight: bold; 
width: 100%;} 

Answer 1

Beh prima domanda ... perché diamine stai nidificazione un div all'interno del tag a? <a href="#"><div class="btn btn-success">Sign Up</div></a>. Prova questo:

<a class="btn btn-block btn-success" href="#">Sign Up</a> 

Poi rimuovere padding-right: 50px; dal selettore .price-content.

Answer 2

Credo che questo sia perché si sta utilizzando

padding-right: 50px

in

.price-contenuti

Provare a spostare spostare la vostra pulsante al di fuori del div di prezzo-contenuto