Question

我有三个div

导航栏
横幅
内容

我想要做的是制作导航栏全宽的背景，但导航栏内的所有元素都有边距和中心，还有横幅和内容。所以我将nav-topmost类添加到包含navbar的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>

Answer 1

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

--- --- HTML

            var deferred = $q.defer();
        $http({
            method: 'GET', 
            url: url,
            headers : {'Content-Type':'application/json'}
        }).
        success(function(data, status, headers, config) {
            deferred.resolve(data);
        }).
        error(function(data, status, headers, config) {
            deferred.reject(data.ExceptionMessage);
        });
        return deferred.promise;

--- css ---

        $.ajax({
            type: 'GET',
            url: url,
            contentType: 'application/json'
        })
        .done(function( data ) {
            console.log(data);
        })
        .fail(function( err ) {
            console.log(err);
        });

Answer 2

这就是你想要的：

.nav-topmost
{
    position:relative;
    top:0;
}

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

Here is the JSFiddle demo

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

添加类时Div重叠

3 个答案: