html - 被 bootstraps 网格系统弄糊涂了，试图将所有内容显示为一个居中列的多行

Question

我正在尝试构建一个布局，其中我的所有内容都显示为一个垂直列，每行具有完全相同的宽度(屏幕的 80% 是我想要的宽度)。

但是由于某些原因，我的某些行显示为与其他行不同的宽度。导航栏和底行容器填充文本的宽度与其他文本不同。我尝试使用不同的边距/填充，但这似乎没有用，所以我认为问题出在其他地方，但我不太清楚是什么。

这是我第一次使用 Bootstrap ，所以网格系统对我来说仍然有些困惑。

这是我的html

  <nav class="navbar navbar-inverse navbar-fixed-top center-block">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="">Home</a></li>
           <li class="dropdown">
            <a href="#" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a>
            <ul class="dropdown-menu">
               <li><a href="#">Another page</a></li>
               <li><a href="#">A different page</a></li>
               <li><a href="#">Another page</a></li>
            </ul>
         </li>
          <li><a href="">A different page</a></li>
          <li class="end-of-navbar"><a href="">Another page</a></li>
        </ul>
      </div>

    </div>
  </nav>


  <div class="container-fluid" id="main-container">

    <div class="row">
      <div class="col-md-12">
        <img class="img" src="http://placehold.it/900x300" id="banner"></img>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <h2 id="big-text">Some Text</h2>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12">
        <img src="http://placehold.it/900x300" id="photo"></img>
      </div>
    </div>


    <div class="row">
      <div class="col-md-12" id="stuff">
         <!-- Here is the row that is not displaying correctly, it appears slightly larger than the rest -->
        <p id="stuff">stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p> 
      </div>
    </div>

   </div>

CSS

    .navbar {
    width: 80%;

}

#main-container {
    width: 80%;
}

#banner {
    padding-top: 60px;
    width: 100%;
    background-color: black;
}

#big-text {
    background-color: black;
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-family: 'Bowlby One SC', cursive;
}

#photo {
    width: 100%;
    margin-top: 0px;
}

#stuff {
    width: 100%;
    background-color: black;
    color: white;
}

有什么想法吗？

Answer 1

网格系统运行正常，你的底栏看起来稍微宽一点的原因是因为你应用了background-color: black;到段落< em>和列本身。
即

 <div class="row">
      <div class="col-md-12" id="stuff">
         <!-- Here is the row that is not displaying correctly, it appears slightly larger than the rest -->
        <p id="stuff">stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff stuff</p> 
      </div>
    </div>

CSS

#stuff {
    width: 100%;
    background-color: black;
    color: white;
} 

如果您从底部的 div 中删除 id="stuff"，则列的外观是“固定的”。
查看此演示 - http://jsbin.com/hehinupepe/edit?html,css,output