html - 如何缩小引导程序中jumbotron和about部分之间的差距

Question

[如何缩小jumbotron和about部分之间的差距] [1] 如何缩小那个白色差距？我试图最小化 jumbotron 和 about 部分之间的边距，但那不能正常工作

  <section id="atas">
      <div class="jumbotron jumbotron-fluid bg-dark">
        <div class="container text-center ">
            <img src="https://img.pngio.com/-profile-png-700_720.png" width="18%" class=" rounded-circle 
   img-thumbnail">
          <h1 class="display-4 text-warning">Rakha Arka</h1>
          <p class="lead text-warning">Kenyamanan anda?.. Ohh Saya tidak perduli ! </p>
        </div>
      </div>
    </section>

    <section id="about" class="about bg-warning">
      <div class="container  pt-5 ">
        <div class="row mt-0">
          <div class="col text-center mb-4  ">
            <h1> About </h1> 
          </div>
        </div>

        <div class="row justify-content-center pb-5">
          <div class="col-md-5 text-center">
            <p>Saya adalah seorang vcerdikiawan yang sangat mementingkan semua berjalan dengan seharusnya dan sesuai dengan rencana saya dan apabila suatu rancana tidak berjalan sesuai arahan saya maka saya akan...</p>
          </div>
          <div class="col-md-5 text-center">
            <p>Halo temanteman nama saya adalah Rakha Arkananta saya adlah seorang freelancer yang sangat handal dalam melakukan setiap tugas yang diberikan client dan saya kan selalu bertanggung jawab akan segala tugas yang client saya berikan</p>
          </div>
        </div>
      </div>
    </section>

标签： htmlcssbootstrap-4

Answer 1

默认情况下，在 bootstrap 4.x 中，jumbotron组件具有margin-bottom: 2rem

解决方案

添加mb-0到jumbotron课堂

<section id="atas">
      <div class="jumbotron jumbotron-fluid bg-dark mb-0">
        <div class="container text-center ">
            <img src="https://img.pngio.com/-profile-png-700_720.png" width="18%" class=" rounded-circle 
   img-thumbnail">
          <h1 class="display-4 text-warning">Rakha Arka</h1>
          <p class="lead text-warning">Kenyamanan anda?.. Ohh Saya tidak perduli ! </p>
        </div>
      </div>
    </section>

    <section id="about" class="about bg-warning">
      <div class="container  pt-5 ">
        <div class="row mt-0">
          <div class="col text-center mb-4  ">
            <h1> About </h1> 
          </div>
        </div>

        <div class="row justify-content-center pb-5">
          <div class="col-md-5 text-center">
            <p>Saya adalah seorang vcerdikiawan yang sangat mementingkan semua berjalan dengan seharusnya dan sesuai dengan rencana saya dan apabila suatu rancana tidak berjalan sesuai arahan saya maka saya akan...</p>
          </div>
          <div class="col-md-5 text-center">
            <p>Halo temanteman nama saya adalah Rakha Arkananta saya adlah seorang freelancer yang sangat handal dalam melakukan setiap tugas yang diberikan client dan saya kan selalu bertanggung jawab akan segala tugas yang client saya berikan</p>
          </div>
        </div>
      </div>
    </section>