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;应用于段落和专栏本身。
即。

 <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"，则列外观为＆＃34;已修复＆＃34;。
请参阅演示 - http://jsbin.com/hehinupepe/edit?html,css,output

由bootstraps网格系统混淆，试图将所有内容显示为一个居中列的多行

1 个答案: