बूटस्ट्रैप बटन को पूर्ण चौड़ाई कैसे बनाएं?

Question

यह वही है जो मेरे पास अभी है। मैं इसे पूरी चौड़ाई

Almost full width

यह एचटीएमएल है बनने के लिए नहीं मिल सकता है। मैंने पहले से ही .btn-block क्लास जोड़ने का प्रयास किया है, लेकिन मुझे वही परिणाम मिलते हैं जैसे कि मैंने चौड़ाई का उपयोग किया: 100%; सीएसएस में। शायद समस्या मूल तत्व के साथ है?

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

और इन शैलियों

#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

खैर पहला सवाल ... क्यों हो तुम a टैग के अंदर एक div घोंसला बनाने से कर रहे हैं? <a href="#"><div class="btn btn-success">Sign Up</div></a>। इस प्रयास करें:

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

फिर .price-content चयनकर्ता से padding-right: 50px; निकालें।

Answer 2

मैं है लगता है कि क्योंकि आप उपयोग कर रहे हैं

padding-सही: 50px

में

.price-सामग्री

चलती ले जाने का प्रयास अपने मूल्य-सामग्री div के बाहर बटन।