css - 默认情况下，Bootstrap 3 自动居中并自动填充整个页面？

Question

这里是 TB3，这是我的 jsfiddle .如您所见，所有内容(页眉、主体和页脚)似乎都包含在导致其被填充+居中的内容中。我希望所有这些内容占据页面/视口(viewport)宽度的 100%。

我怀疑它可能与导航栏有关:

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">

        ...

...也许默认情况下这些类“auto-pad”和“auto-center”需要被覆盖？关于我哪里出错的任何想法？

Answer 1

您需要删除文档开头的整个“容器”到容器流体，因为这是包含并使其居中的内容。

$('.orgSelector').dropdown();
			$('.orgSelector').tooltip();

.acLogo {
	background-image : url("http://placehold.it/250x150");
}
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto
}
.form-signin .form-signin-heading, .form-signin .checkbox {
    margin-bottom: 10px;
}
.form-signin .checkbox {
    font-weight: normal;
}
.form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.form-signin .form-control:focus {
    z-index: 2;
}
.form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.account-wall {
    margin-top: 20px;
    padding: 40px 0px 20px 0px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.login-title {
    color: #555;
    font-size: 18px;
    font-weight: 400;
    display: block;
}
.profile-img {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.need-help {
    margin-top: 10px;
}
.new-account {
    display: block;
    margin-top: 10px;
}
img.user-summary {
  max-width: 100%;
  height: auto;
}
div.user-summary {
  margin: 10px auto;
}
div.user-summary > img {
  width: 80px;
  height: 80px;
  float: left;
  margin: 0 5px;
}
div.user-name {
  margin: 15px 0 0 0;
  font-style: italic;
  display: block;
}
div.user-status {
  font-weight: bold;
}  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">
	      <nav class="navbar navbar-default">
	        <div class="container-fluid">
	          <div class="navbar-header">
	            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	              <span class="sr-only">Toggle navigation</span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	              <span class="icon-bar"></span>
	            </button>
	            <a class="navbar-brand acLogo" style="height:auto; width:50%;" href="/"></a>
	          </div>
	          <div id="navbar" class="navbar-collapse collapse">
	            <ul class="nav navbar-nav">
	           	              <li><a href="/features"><b>FEATURES</b></a></li>
	              <li><a href="/compare"><b>COMPARE US</b></a></li>
	              <li><a href="/pricing"><b>FIZZBUZZ</b></a></li>
	              <li><a href="/company"><b>FOOBAR</b></a></li>
	              <li><a href="/docs"><b>DOCS</b></a></li>
	            </ul>
	            <form class="navbar-form navbar-right" action="/app/dashboard/search" method="POST">
		            <ul class="nav navbar-nav navbar-right">
						<li><button type="button" class="btn btn-success">Sign up</button></li>
						<li><a href="/app/dashboard">
							<button type="button" class="btn btn-link">Sign in</button>
						</a></li>
		            </ul>
		       	</form>
	          </div>
	        </div>
	      </nav>
	    </div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>