Question

以下是我的currently代码，其中包含以下代码。我试图在调整大小时让按钮跨越响应图像的宽度。现在，它在缩小尺寸时缩小了近一半的尺寸，而不是保持与图像对齐。这可能是一个jQuery问题，我不完全确定。

HTML

<div class="container">
        <div class="row">
            <div class="img-box col-lg-12 text-center">
                <button type="button" class="btn btn-lg btn-primary" onclick="window.location='beginReservation.php'">Book Seat Now</button><br>
                <img class="bg img-responsive img-center" src="images/homepage.jpg" alt="Book Seat">
            </div>
         </div>
     </div>

CSS

   .img-box {
     background: white;
     margin-bottom: 20px;
     padding: 0px;
     display:inline-block;
    }

    .btn {
      background: rgb(179,0,14);
      border: rgb(179,0,14);
      padding: 0.5% 32.75%;
      border-radius: 0px;   
      margin:0 auto;    
    }

   .bg {
     margin:0 auto; 
   }

Answer 1

从此课程.img-box{}

中删除display：inline-block

如何使用CSS根据图像的宽度响应设置按钮的宽度

1 个答案: