div调整引导大小时更改表单布局答案

【问题标题】：change layout of form when div resized bootsrapdiv调整引导大小时更改表单布局
【发布时间】：2016-10-16 09:05:58
【问题描述】：

我想在页面像这样加载时显示一个水平表单：http://prntscr.com/cuwqzg，当 div 放大时，它应该像这样改变显示样式http://prnt.sc/cuwqtx。页面使用引导内置类调整大小但仅在调整浏览器大小时。我想在调整 div 大小时实现这一点。

这是我到目前为止所做的在此处插入标题

                  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
                  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                <style>
                body, html {
                    height: 100%;
                    overflow: hidden;
                }
                #wrapper {
                    padding-left: 0;
                    -webkit-transition: all 0.5s ease;
                    -moz-transition: all 0.5s ease;
                    -o-transition: all 0.5s ease;
                    transition: all 0.5s ease;
                }

                #sidebar-wrapper {
                    z-index: 1000;
                    position: fixed;
                    left: 250px;
                    width: 850px;
                    height: 100%;
                    margin-left: -250px;
                    overflow-y: auto;
                    overflow-x: hidden;
                    background: #DB1849;
                    -webkit-transition: all 0.5s ease;
                    -moz-transition: all 0.5s ease;
                    -o-transition: all 0.5s ease;
                    transition: all 0.5s ease;
                }

                #page-content-wrapper {
                    width: 100%;
                    position: absolute;
                    padding: 15px;
                }


                #top{
                margin-top: 16px;
                }


                </style>
                <script>

                $(document).ready(function(){

                    $("#sidebar-wrapper").load("page.html");

                    $("#sidebar-wrapper").click(function (e) {
                        e.preventDefault();

                        $("#sidebar-wrapper").css("width","250");
                    });


                });



                </script>
                <body>
                <div id="wrapper">
                    <!-- Sidebar -->
                    <div id="sidebar-wrapper">


                    </div>
                    <!-- /#sidebar-wrapper -->
                    <!-- Page Content -->
                    <div id="page-content-wrapper"> 

                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-lg-12">


                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /#page-content-wrapper -->
                </div>
                <!-- /#wrapper -->
                </body>
                </html>

这是包含表单的页面。

              <form class="form-horizontal">
               <div class="col-md-4">
                <div class="form-group">
                  <label class="control-label col-sm-4">FirstName</label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control" >
                  </div>
                </div>
                <div class="form-group">
                  <label class="control-label col-sm-4" for="pwd">LastName</label>
                  <div class="col-sm-8">
                    <input type="text" class="form-control">
                  </div>
                </div>
                </div>
                 <div class="col-md-4">
                    <div class="form-group">
                  <label class="control-label col-sm-4" for="pwd">Email</label>
                  <div class="col-sm-8">
                    <input type="email" class="form-control">
                  </div>
                </div>

                    <div class="form-group">
                  <label class="control-label col-sm-4" for="pwd">Passowrd</label>
                  <div class="col-sm-8">
                    <input type="password" class="form-control">
                  </div>
                </div>

                 </div>


              </form>
            </div>

【问题讨论】：

看看网格是如何工作的，getbootstrap.com/examples/grid

标签： javascript jquery html twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

在您使用 col-md-4 的地方添加更多类： col-md-4 col-lg-2 col-sm-12 col-xs-12

【讨论】：