当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设置并设置自己的边距。现在盒子需要更多的空间，因此它不适合。

删除这些边距并the two boxes fit side by side。

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

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

Answer 2

由于您将以下内容添加到Bootstrap中的.row元素，因此您的样式正在破碎。如果你玩这个行的边缘会破坏。

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

我建议使用以下模式：

<div class="row student-row">
     <div class="col-xs-2 student-box"> 
          <h1>Amy</h1>
    </div>
    <div class="col-xs-10 worksheet-box">
          <!-- Add new elements row wise here -->
          <div class="row">
          </div>
    </div>
</div>