添加类时div重叠

Posted 2023-03-28

【中文标题】添加类时div重叠

【英文标题】：Div is overlapped when add class

【发布时间】：2016-03-19 13:20:36

【问题描述】：

我有三个 div

导航栏 横幅 内容

我想要做的是使导航栏的背景全宽，但导航栏内的所有元素都有边距和中心，还有横幅和内容。所以我将 nav-topmost 类添加到包含导航栏的 div 中。但是当我添加这个类时。三个 div 重叠。没有这个类，一切正常，但我的导航栏不是全宽。

谁能帮我解决这个问题？提前致谢！

这是我的代码：

.nav-topmost

  margin-bottom:20px;
  padding:0;
  height:50px;
  background:#000;

.banner

  height:100px;
  background:#eee;
  margin-bottom:15px;

.content

  background:#bbb;

<link href="http://netdna.bootstrapcdn.com/bootswatch/3.0.0/united/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid nav-topmost">
		<div class="container">
			<div class="clearfix">
				<div class="pull-right">
					<a href="#">SET HOME</a>
				</div>
				<div class="pull-right">
					<input type="submit" value="Search" class="form-control"/>
				</div>
				<div class="pull-right">
					<input type="text" class="form-control" />
				</div>
			</div>
            <div class="banner">
              BANNER
            </div>
		</div>
</div>
<div class="container">
  <div class="content">
  Some contents
  </div>
</div>

【参考方案1】：

我在这里做了一些更正，希望这是你想要的。 我更改了结构并将.nav-topmost 的 div 从 .container 的 div 中取出。 http://jsfiddle.net/amitv1093/z2eoxm4v/

---html---

     <nav class="nav-topmost">
<div class="container">
        <div class="pull-right">
                    <a href="#">SET HOME</a>
                </div>
                <div class="pull-right">
                    <input type="submit" value="Search" class="form-control"/>
                </div>
                <div class="pull-right">
                    <input type="text" class="form-control" />
                </div>
          </div>
  </nav>


        <div class="container">

            <div class="banner">
              BANNER
            </div>
        </div>
</div>
<div class="container">
  <div class="content">
  Some contents
  </div>

</div>

---css---

.nav-topmost
    
      margin-bottom:20px;
      padding:10px 0px;

      background:#000;
    

【讨论】：

@Quang Vinh，不要修改引导类的属性。这只是div定位的问题。

【参考方案2】：

这是你想要的吗：

.nav-topmost

    position:relative;
    top:0;


.container, .clearfix, .banner
    width:100%;

Here is the JSFiddle demo

【参考方案3】：

从 container-fluid 元素中删除 nav-topmost 类并将其添加到主导航栏，如下所示

<div class="container-fluid"> /* Remove nav-topmost */
        <div class="container">
            <div class="clearfix nav-topmost"> /* Add Here */
                <div class="pull-right">
                    <a href="#">SET HOME</a>
                </div>
                <div class="pull-right">
                    <input type="submit" value="Search" class="form-control"/>
                </div>
                <div class="pull-right">
                    <input type="text" class="form-control" />
                </div>
            </div>
            <div class="banner">
              BANNER
            </div>
        </div>
</div>