为什么当 cols 加起来为 12 时 Bootstrap 网格系统会溢出？

Question

怎么了

我想要的是

如您所见，Amy 灰色框和矩形灰色框并未将自己定位在同一行上。考虑到我的代码使用 Bootstrap col sys 将两个灰色框放在同一行上，这很奇怪。

我的 cols 加起来是 12，所以我不确定发生了什么。但是，我确实注意到，如果我让 cols 加起来为 11，那么两个灰色框都会放在同一行上。但这不是我想要的修复，因为我希望我的 cols 加起来为 12 并且两个框都出现在同一行上。

如果有人能帮我解决这个问题，将不胜感激！

我的代码

HTML

<div class="row student-row">
     <div class="col-xs-2 student-box"> 
          <h1>Amy</h1>
    </div>
    <div class="col-xs-10 worksheet-box">
          ...
    </div>
</div>

CSS

.student-row{
    margin: 20px 10px 10px 10px;
}

.student-box{
    margin-right: 10px;
}

.worksheet-cell{
    margin-top: 10px;
    margin-left: 10px;
    width: 20%;
}

.worksheet-group{
    margin: 10px 15px 20px 15px;
}

JSFiddle

Answer 1

您已经覆盖了 Bootstrap 设置的边距并设置了您自己的边距。现在盒子需要更多的空间，所以它不适合。

去掉那些边距，两个盒子并排放置。

.student-row{
   /* margin: 20px 10px 10px 10px;*/
}

.student-box{
    background-color: #F5F5F5;
    font-weight: 700;
    text-transform: uppercase;
   /* margin-right: 10px; */
}