Question

我想在页面加载时显示水平表格，如下所示：http://prntscr.com/cuwqzg当div放大时，它应该改变显示样式，如http://prnt.sc/cuwqtx。页面调整为大小使用bootstrap内置类，但在调整浏览器大小时使用oly。我希望在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>

Answer 1

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

当div调整大小时，更改窗体的布局

1 个答案: