<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div id="header" class=" container-fluid">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand"> <img title="DropInn" src="logo/logo.png" width="137" height="45"> </a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
<div class="search" style="">
<form id="search_form1" action="http://products.cogzidel.com/airbnb-clone/search" method="post" class="searchform_head">
<i class="fa fa-search heaericon"></i>
<input type="text" id="searchTextField" name="searchbox" class="searchbox" value="Where are you going?" onblur="if (this.value == ''){this.value = 'Where are you going?'; }" onfocus="if (this.value == 'Where are you going?') {this.value = ''; }" onKeyPress="return disableEnterKey(event)" placeholder="Where are you going?" />
<div id="map-canvas"></div>
<input type="hidden" id="lat" name="lat" value="">
<input type="hidden" id="lng" name="lng" value="">
<div class='advanced_search' id="advanced_search" style='display: none; position: absolute;
z-index: 2147483647; background:#FCFCFC; border: 1px solid #CCCCCC; padding: 10px; opacity: 1;width: 240px;top:37px;'>
<label class="checkin_search">
Check in
<div id="checkinWrapper" class="input-wrapper">
<input id="checkindate2" class="check_wrap checkin search-option ui-datepicker-target" type="text" placeholder="Check in" name="checkin" autocomplete="off" readonly>
</div>
</label>
<label class="checkout-detail_search">
Check out
<div id="checkoutWrapper" class="input-wrapper">
<input id="checkoutdate2" class="check_wrap checkout search-option ui-datepicker-target" type="text" placeholder="Check out" name="checkout" autocomplete="off" readonly>
</div>
</label>
<div class="clearfix"></div>
<p class="filter_header">Room type</p>
<!-- Search filter content is below this -->
<div class="clearfix"></div>
<ul class="search_filter_content">
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Entire home/apt" name="room_types1" id="room_type_0">
<label class="checkbox_list" for="room_type_0"> Entire home/apt</label>
</li>
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Private room" name="room_types2" id="room_type_1">
<label class="checkbox_list" for="room_type_1"> Private room</label>
</li>
<li class="clearfix checkbox">
<input class="checkbox_filter" type="checkbox" value="Shared room" name="room_types3" id="room_type_2">
<label class="checkbox_list" for="room_type_2">Shared room</label>
</li>
</ul>
<div class="clearfix"></div>
<!-- <button id="submit_location" class="btn_dash" style=" font-size: 12px;margin: 10px 0; padding: 5px 11px;" type="submit" value="Search" name="Submit" >-->
<!--<i class="fa fa-search submitloc"></i>-->
<!--<img src="http://products.cogzidel.com/airbnb-clone//css/templates/blue/images/search_icon1.png" />-->
<button id="submit_location" class="btn_dash" type="submit" value="Search" name="Submit">
<i class="fa fa-search submitloc"></i>
<!--<img src="http://products.cogzidel.com/airbnb-clone//css/templates/blue/images/search_icon1.png" />-->
Find A Place </button>
<label class="btn_dash" id="close_search">
Close </label>
</div>
</form>
</div>
</li>
</form>
</li>
<li id="subnavigation" class="dropdown browse-dropdown">
<a class="dropdown-toggle header_link" href="#" data-toggle="dropdown">Browse <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu browse-submenu">
<li><a href="home/popular/index.html"><!-- <i class="icon-popular"> </i>--> <i class="fa fa-heart"></i> Popular</a></li>
<li><a class="friends" href="home/friends/index.html"><i class="icon-friends"> </i> Friends</a></li>
<li><a class="map-neigh" href="home/neighborhoods/index.html"><!--<i class="icon-neighborhoods"> </i> --> <i class="fa fa-map-marker"></i>Neighborhoods</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="rightsign sign1"><a href="users/signup.html">Sign Up</a></li>
<li class="rightsign sign1"><a href="users/signin.html">Sign In</a></li>
<li id='view_help' style='float:left;'>
<li id='view_help' class="dropdown browse-dropdown help_book">
<a class="dropdown-toggle view_help1" data-toggle="dropdown" href="#">Help <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu browse-submenu">
<li><a href="home/help/16.html">How do i sign up?</a></li>
<li><a href="home/help/1.html"> Need help on this page? </a>
</li>
</ul>
</li>
<li class="lisyourspace"> <a class="btn yellow" href="rooms/new.html"><span>List Your Space</span></a> </li>
<!--<li class="listyourspace_menu"> <a class="yellow btn" href="http://products.cogzidel.com/airbnb-clone/rooms/new"><span>List Your Space</span></a> </li>-->
</nav>
</div>
</header>
我需要这个显示的CSS代码，就像Airbnb主页一样。有人请帮忙解决这个问题。我尝试了很多次，但未能正确设计。如何做全宽网格系统以及如何编写CSS文件？
答案 0 :(得分：2)
首先，您应该尝试添加背景元素。然后，使用基本css使其适合整个页面宽度，重复与否（取决于您的背景图像）
然后，关于“全宽网格系统”，bootstrap有许多适合您要求的类，如'col-lg - ** col-md - ** col-sm - ** col-xs - **'，你应该看看这个：
http://getbootstrap.com/css/#grid
您的代码有点过于通用。但是这个“bootply”对你来说是一个很好的起点：
http://www.bootply.com/b1SPDA3GOn
希望它有所帮助！