html - 如何在 bootstrap-4 中删除 div 的上边距

Question

如何在 bootstrap-4 中删除 div 的上边距，mt-0 类不起作用，自定义 css margin-top: 0; 也不起作用。

<nav class="navbar navbar-expand-sm navbar-dark bg-primary mb-3 py-0">
      <div class="container">
        <a href="#" class="navbar-brand"
          ><span id="branding">A&K</span> Resturant</a
        >

        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse mr-auto" id="navbarNavAltMarkup">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Services</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="h-75 bg-info mt-0"></div>

在 CSS 文件中，我将 body 和 html 高度设置为 100%。

Answer 1

在 nav 上使用此 html 我更改类 mb-0 并将最后一个 div 类更改为 h-75 bg-info

使用下面的代码。

       <nav class="navbar navbar-expand-sm navbar-dark bg-primary mb-0 py-0">
      <div class="container">
        <a href="#" class="navbar-brand"
          ><span id="branding">A&K</span> Resturant</a
        >

        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a href="#" class="nav-link">Home</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">About</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">Services</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="h-75 bg-info">
Erat amet lorem magna amet stet et dolore. Ipsum est justo lorem takimata vero. Accusam invidunt takimata lorem ut lorem.
    </div>