时间戳

首页 > 解决方案 > 我无法使用我的 CSS 文件在引导程序中填充预定义的类

html - 我无法使用我的 CSS 文件在引导程序中填充预定义的类

问题描述

html

  <section id="title">
   <div class="container-fluid">
   <!-- Nav Bar -->
    <nav class="navbar navbar-expand-lg navbar-dark">
       <a class=" navbar-brand">tindog</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
       <ul class ="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link" href="">Contact</a></li>
          <li class="nav-item"><a class="nav-link" href="">Download</a></li>
          <li class="nav-item"><a class="nav-link" href="">Pricing</a></li>
      </ul>
      </div>

  </nav>





    <!-- Title -->

    <div class="row">
      <div class="col-lg-6">
      <h1 class="first">Meet new and interesting dogs nearby.</h1>
      <button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>
      <button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i> Download</button>
      </div>
      <div class="col-lg-6">
      <img src="images/iphone6.png" alt="iphone-mockup">
      </div>
    </div>

</div>
</section>

css

 body
{
 font-family: Montserrat;

}


    
#title
{
  background-color: #ff4c68;
  color: #fff;
}

.first
{
  font-family : Montserrat-black;
  font-size: 3rem;
  line-height: 1.5;

  }
  .container-fluid
  {
    padding: 3% 15%;

    }

img 这是我网页的输出。我只想为 <section id="title" 中的 <div = class="container-fluid> 元素从左右添加更多填充

我正在学习 Angela Yu 的 Webdev udemy 课程。目前正在学习bootstrap。在上面的代码中，我使用引导类 container-fluid 作为 . 我真正想要的是为 div 元素添加更多填充，以便在网页上导航栏和 iphone 图像以及文本从右侧和左侧填充。

标签： htmlcssbootstrap-5

解决方案

更改以下内容

<div class="row">
  <div class="col-lg-6 pl-5">
    <h1 class="first">Meet new and interesting dogs nearby.</h1>
    <button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i> Download</button>
    <button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i> Download</button>
  </div>
  <div class="col-lg-6 pl-5">
    <img src="images/iphone6.png" alt="iphone-mockup">
  </div>
</div>

推荐阅读