Làm thế nào để tạo một nút Bootstrap với chiều rộng đầy đủ?

Question

Đây là những gì tôi có ngay bây giờ. Tôi không thể làm cho nó có chiều rộng đầy đủ

Almost full width

Đây là html. Tôi đã thử thêm lớp .btn-block nhưng tôi nhận được kết quả tương tự như tôi chỉ sử dụng chiều rộng: 100%; trong css. Có lẽ vấn đề là với yếu tố cha mẹ?

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

Và đây là những phong cách

#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

Vâng câu hỏi đầu tiên ... tại sao heck là bạn làm tổ một div bên trong thẻ a? <a href="#"><div class="btn btn-success">Sign Up</div></a>. Hãy thử điều này:

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

Sau đó xóa padding-right: 50px; khỏi bộ chọn .price-content.

Answer 2

Tôi nghĩ rằng đó là bởi vì bạn đang sử dụng

padding-phải: 50px

trong

.price-content

Hãy thử di chuyển di chuyển của bạn bên ngoài div giá nội dung.