文章/答案/技术大牛

发布

社区首页 >问答首页 >引导4容器重叠

问引导4容器重叠
EN

Stack Overflow用户

提问于 2019-05-06 12:11:52

回答 1查看 509关注 0票数 1

使引导4容器实现如下标题形状

但是当我尝试在引导4中向左浮动和向右浮动时，这种情况就会发生。

两个容器向左浮动和向右浮动，我在上面的标题中看到了这一点。

我的代码是

<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>

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

如有任何帮助，敬请提前感谢。

html

css

bootstrap-4

回答 1

Stack Overflow用户

发布于 2019-05-06 12:37:17

请更改css。

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

您的容器不清楚，因此需要添加此css。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56004969

复制

相似问题

问引导4容器重叠
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4容器重叠EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导4容器重叠
EN