我想在页面加载时显示水平表格,如下所示: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>
答案 0 :(得分:0)
添加更多使用col-md-4的类: col-md-4 col-lg-2 col-sm-12 col-xs-12