php - 使用 Bootstrap 4,我的卡片标题底部显示额外的空白

标签 php css bootstrap-4

我是 PHP 和 Bootstrap 的新手。我正在制作一个登录表单,当我不输入 <link rel="stylesheet" type="text/css" href="styles.css"> 时它非常好在我的标题中。

但我不能只是将它们从我的页眉中删除,因为我稍后会因为一些自定义按钮等而需要它们。

看看下面的这个片段。如您所见,当我已经指示 mt-5 时有一个空白区域.知道是什么原因造成的以及如何解决这个问题吗?提前致谢!

[![在此处输入图片描述][1]][1]

.index-banner {
  background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 40, 0.5)), url(images/1.jpg) no-repeat center center fixed;
  background-size: cover;
}

.primary-container {
  padding-top: 150px;
  padding-left: 50px;
  transition: all 4s ease-in-out;
  line-height: 10px;
}
<?php require_once 'indexheader.php'; ?>

<!DOCTYPE html>
<html>

<head>
  <title>Leafnote | Register</title>

  <link rel="stylesheet" type="text/css" href="styles.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 m-auto">
        <div class="card bg-white mt-5">
          <div class="card-title text-black">
            <h5 class="text-center py-2 font-weight-bold">Register</h5>
          </div>
          <div class="card-body">
            <form action="process.php" method="POST">
              <input type="text" name="lname" placeholder="Lastname" class="form-control mb-2">
              <input type="text" name="fname" placeholder="Firstname" class="form-control mb-2">
              <input type="text" name="email" placeholder="Email address" class="form-control mb-2">
              <input type="text" name="passw" placeholder="Password" class="form-control mb-2">
              <input type="text" name="passw2" placeholder="Re-enter password" class="form-control mb-2">
              <button class="btn btn-success btn-block mt-3" name="register" class="pt-3">Register</button>

              <div class="text-center mt-3" style="font-size: 14px;">Already have an account?
                <a href="signup.php" class="alert-link">Login</a>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>

最佳答案

Bootstrap 提供实用程序类,这将非常方便并减少您额外的 css,例如添加填充或边距等等..

如果你需要添加或删除边距,你可以添加类,就像你可以使用填充一样

mb-0 , mb-10

您可以获得更多信息 Bootstrap Utilities

关于php - 使用 Bootstrap 4,我的卡片标题底部显示额外的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56765463/

相关文章:

html - 防止在内联 block 元素之前换行

CSS 悬停在我的菜单栏中无法正常工作

html - 如何删除此 Bootstrap 4 模式右侧的多余空间?

php - mysql/php - 确定数据来自哪里

php - 如何使用一个表单提交从 PHP 表单更新多个 mySQL 数据库?

html - DIV列表链接拒绝触摸

javascript - 单击导航栏时如何禁用刷新背景图像?

javascript - 制作表单传递参数

php - 在 Mac OS X 10.6 上安装 PECL

html - css 不适用于没有 href 属性的标签