Question

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

我的定价卡工作方式不同。我已经在下面添加了代码。

有人能解释为什么更改屏幕尺寸后我的价目表会越来越宽，而Bootstrap版本却保持不变（就宽度和高度而言）。

谢谢！

Table of Contents
Part 0: Before reading Rails 5 source code
  What will you learn from this tutorial?
Part 1: Your app: an instance of YourProject::Application
Part 2: config
Part 3: Every request and response
  Puma
  Rack apps
  The core app: ActionDispatch::Routing::RouteSet instance
  Render view
  How can instance variables defined in Controller be accessed in view file?
Part 4: What does $ rails server do?
  Thor
  Rails::Server#start
  Starting Puma
  Conclusion
  Exiting Puma
  Process and Thread
  Send SIGTERM to Puma

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>

Bootstrap元素无法按预期运行的问题

1 个答案: