Wie mache ich eine Bootstrap-Taste in voller Breite?

Question

Das ist, was ich gerade habe. Ich kann es nicht erhalten volle Breite

Almost full width

Dies ist die HTML zu werden. Ich habe bereits versucht, .btn-Block-Klasse hinzuzufügen, aber ich bekomme die gleichen Ergebnisse, als wenn ich nur Breite verwendet: 100%; in der CSS. Vielleicht ist das Problem mit dem Elternelement?

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

Und das sind die Arten

#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

Nun erste Frage ... warum zum Teufel Sie ein div in der a Tag nisten? <a href="#"><div class="btn btn-success">Sign Up</div></a>. Versuchen Sie folgendes:

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

Dann padding-right: 50px; aus dem .price-content Selektor entfernen.

Answer 2

denke ich, dass, weil Sie

padding-right verwenden: 50px

in

.Preis-Inhalt

bewegen Versuchen Sie bewegen Ihre Button außerhalb von Preis-Inhalt div.