css Bootstrap导航栏布局和背景图片太小

vawmfj5a 于 2023-06-25 发布在 Bootstrap

关注(0)|答案(1)|浏览(149)

我试图创建一个Bootstrap 5网页根据提供的设计。我面临几个问题。
这就是设计：

我目前的进度：

第一个问题是导航栏。我有麻烦的位置的元素在相同的距离，从双方，因为它的设计。第二个问题是，当我打开菜单时，菜单被移到了顶部和左侧。

第三个问题是英雄部分的大小。我希望它更高，以显示完整的图像。
最后一个问题是标题的宽度。我想把它 Package 在太大的展示器上。
源代码片段：

<meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .bg-image {
      position: relative;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
      background-image: url('../assets/images/bg/hero-section-image-bg.jpg');
    }
    .navbar {
      height: 6rem;
    }
  </style>
</head>
<body>

<header>
  <div class="bg-image" style="">
    <nav class="navbar">
      <div class="container-fluid">
        <a class="navbar-brand text-white m-auto" href="#"><h2>Lelisoft</h2></a>
        <ul class="navbar-nav m-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle text-white" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              <img src="../assets/images/icons/us-flag.svg" alt="english" width="32">
              English
            </a>
            <ul class="dropdown-menu">
              <li>
                <a class="dropdown-item text-white" href="#">
                  <img src="../assets/images/icons/cz-flag.svg" alt="cesky" width="32">
                  Cesky
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </nav>
    <div style="padding: 200px 0 200px;">
      <div class="d-flex justify-content-center align-items-center h-100">
        <div class="text-white" style="background-color: rgba(0, 0, 0, 0.6);">
          <h1 class="mb-3">Boost Efficiency and Productivity: Modernize Your Legacy Apps Today!</h1>
          <h2 class="mb-3">Don't let your legacy applications slow down your business.</h2>
        </div>
      </div>
    </div>
  </div>
</header>

我怀疑我开始正确。我对CSS不太熟悉，所以我寻求建议。

css

来源：https://stackoverflow.com/questions/76520555/bootstrap-navbar-layout-and-background-picture-too-small

1条答案

按热度按时间

fsi0uk1n1#

下面是改进后的代码，并在最后进行了解释。

<!DOCTYPE html>
<html lang='end'>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <style>
    .bg-image {
      position: relative;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center 0%;
      background-image: url('https://images.unsplash.com/photo-1600210491369-e753d80a41f3?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2ODczNDI0OTN8&ixlib=rb-4.0.3&q=85');
      height: 760px;
    }
    .navbar {
      height: 6rem;
    }
    .top-nav{
      padding: 0px 70px;
    }
  </style>
</head>
<body>

<header>
  <div class="bg-image">
    <nav class="navbar">
      <div class="container-fluid border border-danger top-nav">
        <a class="navbar-brand text-dark" href="#"><h2>Lelisoft</h2></a>
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
            English
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            <li><a class="dropdown-item" href="#">Cesky</a></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
            <li><a class="dropdown-item" href="#">Something else</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div style="padding: 200px 0 200px;">
      <div class="d-flex justify-content-center align-items-center h-100">
        <div class="text-white" style="background-color: rgba(0, 0, 0, 0.6);">
          <h1 class="mb-3">Boost Efficiency and Productivity: Modernize Your Legacy Apps Today!</h1>
          <h2 class="mb-3">Don't let your legacy applications slow down your business.</h2>
        </div>
      </div>
    </div>
  </div>
</header>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
</body>
</html>

解决您的问题：
1.您已经将bootstrap的margin auto类（m-auto）用于锚标记（链接）以及导航栏中的ul元素。这导致它应用了大量的保证金，并导致从两侧有很大的空间。我创建了一个新的CSS类：“nav-top”，并在锚标签和ul项的父容器的左右两侧应用了70 px的自定义填充，您可以根据需要更改填充量。
1.通过使用下拉组件解决了菜单问题。如果你有任何与组件相关的困难，去Bootstrap网站，在“组件”下，你可以看到不同的元素是如何实现的。复制代码并根据您的要求进行更改。
1.对于英雄，我给了英雄div 570 px的高度（你可以根据你的需要改变高度），我用下面的方式定位了背景图像：
背景位置：中心0%;
这将使图像水平居中并将图像向上移动到顶部。当您将0%值增加到10%或40%时，图像将分别向下移动（如果为0%，则图像移动到顶部，如果为100%，则图像移动到底部）。您可以根据需要垂直上下移动图像。
1.对于标题，将外部div的宽度限制为70%或80%。例如：
div{ width：80%;}

赞(0）回复(0）举报 2023-06-25

我来回答

css Bootstrap导航栏布局和背景图片太小

1条答案

相关问题

热门标签

最新问答