Question

我正在尝试构建一个包含2个全高列的页面。左栏是一个菜单。右边的部分将有一个表格。尝试使用bootstrap使其成为响应式页面。我编写了以下代码，但是当我调整窗口大小时，表单内容溢出到左侧菜单中。我尝试使用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>

请告知如何使用bootrap或css修复溢出到菜单中的表单。

jsfiddle链接：https://jsfiddle.net/snehilw/8zrkcyyx/

Answer 1

Twitter Bootstrap解决方案

<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>

如果您希望它堆叠在您可以使用的较小设备上 col-sm-6而不是

css html bootsrap布局问题

1 个答案: