添加类时div重叠答案

【问题标题】：Div is overlapped when add class添加类时div重叠
【发布时间】：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>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：