html - Bootstrap 元素未按预期工作的问题

Question

我正在学习 Bootstrap 并尝试在他们的网站上重新创建他们的示例主题。我目前正在研究的是: https://getbootstrap.com/docs/4.3/examples/pricing/

我的定价卡的工作方式不同。我在下面包含了代码。

有谁能解释为什么我的价格卡在屏幕尺寸改变时变得更宽，而 Bootstrap 版本保持不变(在宽度和高度方面)。

谢谢!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="card-deck mb-3 text-center">
      <!--Price Section-->
    
      <div class="card mb-4 shadow-sm">
    
        <div class="card-header">
            <h4 class="my-0 font-weight-normal">Free</h4>
        </div>
    
        <div class="card-body">
    
            <div class="card-title">
                <h1>$0 <small class="text-muted">/ mo</small></h1>
            </div>
            <ul class="card-text list-unstyled mt-3 mb-4">
                <li>10 users included</li>
                <li>2 GB of storage</li>
                <li>Email Support</li>
                <li>Help Center Access</li>
            </ul>
    
        
            <button type="button" class='btn btn-lg btn-block btn-outline- 
       primary'>Sign Up</button>
        </div>
    
        </div>
    
        <!--Price End-->
     
    
        <!--Price Two-->
        <div class="card mb-4 shadow-sm">
    
            <div class="card-header">
                    <h4 class="my-0 font-weight-normal">Free</h4>
                </div>
        
            <div class="card-body">
        
                <div class="card-title">
                    <h1>$15 <small class="text-muted">/ mo</small></h1>
                </div>
                <ul class="card-text list-unstyled mt-3 mb-4">
                    <li>10 users included</li>
                    <li>2 GB of storage</li>
                    <li>Email Support</li>
                    <li>Help Center Access</li>
                </ul>
        
          
                <button type="button" class='btn btn-lg btn-block btn- 
       primary'>Sign Up</button>
            </div>
        
        </div>
        
       <!--Price End-->
    
    
       <!--Price Three-->
       <div class="card mb-4 shadow-sm">
    
            <div class="card-header">
                    <h4 class="my-0 font-weight-normal">Free</h4>
                </div>
        
            <div class="card-body">
        
                <div class="card-title">
                    <h1>$29 <small class="text-muted">/ mo</small></h1>
                </div>
                <ul class="card-text list-unstyled mt-3 mb-4">
                    <li>10 users included</li>
                    <li>2 GB of storage</li>
                    <li>Email Support</li>
                    <li>Help Center Access</li>
                </ul>
        
                      <button type="button" class='btn btn-lg btn-block btn- 
      primary'>Sign Up</button>
            </div>
        
       </div>
       <!--Price End-->
       </div>

Answer 1

只是按钮类没有正确应用。试试这个解决方案

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <div class="container">
    <div class="card-deck mb-3 text-center">
      <!--Price Section-->

      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Free</h4>
        </div>

        <div class="card-body">
          <div class="card-title">
            <h1>$0 <small class="text-muted">/ mo</small></h1>
          </div>
          <ul class="card-text list-unstyled mt-3 mb-4">
            <li>10 users included</li>
            <li>2 GB of storage</li>
            <li>Email Support</li>
            <li>Help Center Access</li>
          </ul>
          <button class="btn btn-outline-primary btn-block">Sign Up</button>
        </div>
      </div>

      <!--Price End-->

      <!--Price Two-->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Free</h4>
        </div>

        <div class="card-body">
          <div class="card-title">
            <h1>$15 <small class="text-muted">/ mo</small></h1>
          </div>
          <ul class="card-text list-unstyled mt-3 mb-4">
            <li>10 users included</li>
            <li>2 GB of storage</li>
            <li>Email Support</li>
            <li>Help Center Access</li>
          </ul>

          <button class="btn btn-primary btn-block">Sign Up</button>
        </div>
      </div>

      <!--Price End-->

      <!--Price Three-->
      <div class="card mb-4 shadow-sm">
        <div class="card-header">
          <h4 class="my-0 font-weight-normal">Free</h4>
        </div>

        <div class="card-body">
          <div class="card-title">
            <h1>$29 <small class="text-muted">/ mo</small></h1>
          </div>
          <ul class="card-text list-unstyled mt-3 mb-4">
            <li>10 users included</li>
            <li>2 GB of storage</li>
            <li>Email Support</li>
            <li>Help Center Access</li>
          </ul>

          <button class="btn btn-primary btn-block">Sign Up</button>
        </div>
      </div>
      <!--Price End-->
    </div>
  </div>