Question

制作bootstrap 4容器以实现这样的标头形状

Header style trying to get

但是当我尝试在bootstrap 4中向左浮动和向右浮动时有时候是这样的 My header is overlapping 我在上面的标题中看到有两个容器向左浮动和向右浮动。

我的代码是

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <body style="background-image:
    linear-gradient(to bottom, rgba(250, 231, 59, 0.52), rgba(129, 235, 8, 0.904)),
    url('images/tree.png'); background-size: cover;background-attachment: fixed; height: 100%;">
      <div class="container">
          <div class="float-left w-25">
              <ul class="navbar-nav">
                <li class="nav-item"><a href="#"><img
                      src="images/fb.png"></a>
                </li>
              </ul>
            </div>
      </div>
      <div class="container">
          
        <div class="row">
          <div class="col-10 offset-1">
            
            <nav class="navbar navbar-expand-lg">
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
                aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <i class="material-icons">menu</i>
              </button>
    
              <div class="collapse navbar-collapse" id="navbarNavDropdown">
    
                <ul class="mx-auto navbar-nav">
                  <li class="nav-item ml-2">
                    <a href="#" class="nav-link btn-warning btn rounded">Home</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">About us</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">Product</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#">
                      <img src="images/mango.jpg" alt="Home" height="100" width="150">
                    </a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">Order Form</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">Gallery</a>
                  </li>
                  <li class="nav-item ml-3">
                    <a href="#" class="nav-link btn-warning btn">Contect us</a>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </body>

示例仅在全屏视图中显示上述行为

感谢您的任何帮助。

Answer 1

请可以更改CSS。

.container:after, .container:before {
    display: table;
    content: '';
    clear: both;
    box-sizing: border-box;
}

您的容器不清楚，您添加了此CSS

引导程序4个容器重叠

1 个答案: