1
http://prntscr.com/cuwqzgのようにページがロードされたときにフォームを横方向に表示したい場合、divを拡大すると、このような表示のスタイルが変更されるはずです.。ブートストラップ組み込みクラスを使用していますが、ブラウザのサイズを変更するとdivをサイズ変更したときにこれを実現したい。ここ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>
チェックアウトどのようにグリッド作品、https://getbootstrap.com/examples/grid/ – DelightedD0D