javascript - CSS HTML Bootstrap布局问题

我试图建立一个有两个全高列的页面。左列是菜单。右边的部分将保存一个表单。我正试图通过使用引导程序使这成为一个响应页面。我已经编写了以下代码，但是当我调整窗口大小时，表单内容会溢出到左边的菜单中。我尝试使用引导网格，但最后使用了我自己的CSS。这还是行不通的。
我在这里创建了一个jsfiddle：https://jsfiddle.net/snehilw/8zrkcyyx/
我当前的布局如下：

<div class="containerr">
  <div class="roww">
    <!-- Left Navigation Menu  -->
    <div class="coll-md-2 no-float">
      <div class="nav-side-menu">
        <div class="brand"> &nbsp</div>
        <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
        <div class="menu-list">
          <ul id="menu-content" class="menu-content collapse out">
            <li>
              <a href="#">
              <i class="fa fa-dashboard fa-lg"></i>Scenario Builder <span class="badge badge-right">3</span>
              </a>
            </li>
            <li id= "addNewScenario">
              <a href="#">
              <i class="fa fa-lg"></i> <span class="glyphicon glyphicon-plus-sign"></span> Add New Scenario
              </a>
            </li>
            <li>
              <a href="#">
              <i class="fa fa-lg"></i><span class="glyphicon glyphicon-floppy-disk"></span> Save
              </a>
            </li>
            <li>
              <a href="#">
              <i class="fa fa-lg"></i><span class="glyphicon glyphicon-stats"></span> Test
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- FORM CONTENT -->
    <!-- End Form content-->
  </div>
</div>

请建议如何使用Bootstrap或CSS修复溢出到菜单中的表单。
jsfiddle链接：https://jsfiddle.net/snehilw/8zrkcyyx/

最佳答案

Twitter引导解决方案

<div class="container">
  <div class="row">

    <div class="col-xs-6">
      html for menu
    </div>

    <div class="col-xs-6">
      html for form
    </div>

 </div>
</div>