Bootstrap列是堆叠而不是保持一致

Question

我正在使用Bootstrap 3.7.7，我试图弄清楚为什么我的3列在全宽度上堆叠，而不是在一行中保持内联。它们应该保持整行，直到屏幕缩小到小尺寸，但它们会像这样自动堆叠起来，我无法弄清楚原因：

        <div class="container-fluid" id="currentTools">
            <div class="row">
                <div class="col-md-2 col-xs-1 currentToolsCol" id="toolbarColumn">
                // toolbar with dropdowns here
                </div>
                    <!--Tables and Animals viewspace -->
                <div class="col-md-6 col-xs-11 currentToolsCol" id="projectdataColumn">
                    <h2 class="viewHeader">Project Data</h2>
                    <hr class="viewHeaderHR">

                </div>
                    <!-- Notes viewspace -->
                <div class="col-md-4 col-xs-11 sliderContainer currentToolsCol" id="notesColumn">
                    <h2 class="sliderHeaderRow" id="notesHeader">Notes</h2>
                    <div class="appSliders" id="workspaceNoteSlider">
                        <i class="fa fa-book sliderMainbutton" aria-hidden="true"></i>  <h3>View Project Notes</h3>
                    </div>
                    <div class="appSliderContent container-fluid " id="notesLoadZone" url='@routes.ProjectsWorkSpaceController.getAllNotes(projectTitle)'>

                    </div>

                </div>
            </div>

        </div>

我已经制作了一个JFiddle here，但由于本地存储的东西并且需要执行一些服务器操作以使其正确执行，因此它不能完全代表正在发生的事情。

我注意到如果我将中间元素设置为宽度为45％而不是手动50％，我可以“修复”这个，但是当Bootstrap需要注意时，这似乎过于复杂了这个的。

Bootstrap网格不应该保持这些东西的排列吗？