Question

因此，我已经开始编写我的第一个代码来学习引导程序和边距+填充无效。我试图寻找答案，但没有一个有帮助。如下面的代码所示。我正在尝试对按钮使用m-5 / p-5类，但是边距和填充无效，按钮保持不变。

我尝试使用pt-5或mt-5，因此选择要扩展的确切边，但这些边也不起作用。我还在本节以外进行了实验，它不适用于页面的任何元素。我还尝试了许多不同的浏览器，所有浏览器都结束了相同的操作。

<!doctype html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container bg-success">
    <div class="row">
        <div class="col">
            <h1 class="text-capitalize text-danger">The first boostrap document.</h1>
            <p class="text-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
            <br>
            <button type="button" class="btn btn-primary p-5">BTN primary</button>
        </div>
    </div>
</div>
</body>
</html>

我希望按钮在填充文字时会扩展，但在填充或边距时会保持不变。

感谢您的帮助。

Answer 1

p-5是Bootstrap 4类，但是您已经引用了Bootstrap 3 CSS（和JavaScript）文件。如果将其更新为Bootstrap 4（确保包含PopperJS），则填充将按预期工作：

<!doctype html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container bg-success">
    <div class="row">
      <div class="col">
        <h1 class="text-capitalize text-danger">The first boostrap document.</h1>
        <p class="text-dark">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
        <br>
        <button type="button" class="btn btn-primary p-5">BTN primary</button>
      </div>
    </div>
  </div>
</body>

</html>

填充和边距在Boostrap中不起作用

1 个答案: