有人可以帮我解决我的引导程序布局问题。
在浏览器断点达到980px之前，右列会在左列下方环绕，但我希望它保持在原位置，尽管没有发生环绕。
问题是我还要求左列具有固定的宽度，右列不具有固定的宽度，但是可能能够减小表单中元素的宽度，以便当浏览器/视口为调整大小（我的水平形式在同一行中包含更多元素，但是出于这个问题的考虑，我省略了其中的一些重叠元素以将其保持为最小）。
我不认为我的表单组元素具有正确的col大小...
我希望使用媒体查询来解决此问题（目前我的工作量很小），所以如果有人可以在我的Codepen中播放，那将非常有帮助:)
我有一个链接，您可以在此处修改我的布局：
http://codepen.io/krystyna93/pen/GZzqrq
body {
background-color: #ccc;
}
/* General styles */
.container {
background-color: #bbb;
font-family: arial, verdana, sans-serif;
width: 1530px;
margin: 0 auto;
}
/* Large desktop */
@media and screen (max-width: 1590px) {
.container {
width: auto;
}
}
@media and screen (min-width: 981px) and (max-width: 1530px) {
.accordion.sidebar {
width: 230px;
}
}
@media (min-width: 980px) {
.accordion.sidebar {
min-width: 200px;
max-width: 200px;
}
}
.col-md-10 {
border-left: 1px solid #4d4d4d;
padding: 0;
margin: 0;
}
.container .row.header {
color: #fff;
border-bottom: 6px solid #fff
}
.container .row.header h1 {
padding: 30px 0;
font-size: 3.5em;
font-weight: 300;
}
h2 {
color: #fff;
font-size: 32px;
}
h3 {
color: #ccc;
font-size: 30px;
padding-bottom: 10px;
}
h3.inner {
padding-left: 15px;
}
h4 {
color: #ccc;
font-size: 22px;
}
.headers {
border-top: 1px solid #ccc;
margin-top: 50px;
margin-bottom: 30px;
}
.headers h1 {
padding: 20px 0 0 0;
}
.headers p {
font-size: 1.6em;
color: #fff;
padding: 0 0 10px 0;
margin: 0;
}
/* ****** NAVIGATION SIDEBAR ********
**********************************
*/
.accordion.sidebar {
padding: 0;
background-color: #fff;
}
.panel {
border-radius: 0 !important;
border: 0;
font-family: 'Lato', Arial, sans-serif;
font-weight: 400
}
.panel-group {
border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff}
.panel-heading h4.panel-title {
border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;}
.panel-heading h4.panel-title a: link {
margin-left: 10px;
text-decoration: none;
font-weight: bold;
font-size: 20px
}
.panel-heading h4.panel-title a:active {
color: #fff
}
.panel-heading h4.panel-title a:hover {
color: #FF5500
}
.panel-group .panel+.panel {
margin-top: 0px !important;
border-top: 1px solid #ccc
}
.panel.panel-default.custom .panel-heading {
background: #fff;
color: #000;
border-color: #fff
}
.panel-body {
/* padding-top: 2px !important; padding-bottom: 0px !important; */
padding: 0px !important;
border: 0
}
.panel-body ul {
margin: 0;
padding: 0
}
.panel-body ul li {
padding: 10px 0 !important;
border-bottom: 1px solid #ccc;
font-size: 1.4em
}
.panel-body ul li:last-child {
border-bottom: 0
}
.panel-body ul a {
color: #1f1f1f
}
.panel-body ul li a:link {
margin-left: 40px !important;
color: #1f1f1f
}
.panel-body ul li a:active {
color: #fff
}
.panel-body ul li a:hover {
text-decoration: none;
color: #FF5500
}
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse {
border: 0 !important;
padding: 0
}
.panel-heading.collapsed {
background-color: #222222
}
/* ******** FORM STYLING ***********
************************************
*/
.form-horizontal .form-group .custom-label {
text-align: left;
margin-top: -10px;
font-size: 22px;
font-weight: normal;
color: #fff;
}
.form-horizontal .form-group .form-control {
background-color: #4d4d4d;
border-color: #4d4d4d;
color: #fff;
border-radius: 3px;
}
.form-horizontal .form-group .input-text {
font-size: 1.3em;
color: #fff;
}
.form-horizontal .form-group .form-control:hover {
background-color: #34383C;
border: 1px solid #4d4d4d;
}
.form-horizontal .form-group .form-control:focus {
border: 1px solid #FF5500;
}
/* DROPDOWN MENU STYLING */
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret {
/* position: absolute; right: 12px; top: calc(50% - 2px); */
background-image: url('arr.jpg');
background-repeat: no-repeat;
position: absolute;
right: 12px;
top: calc(50% - 2px);
}
.form-group.social .col-md-2 {
padding: 0;
margin: 0;
width: 200px;
}
.form-group.social .col-md-2 .fa-instagram,
.form-group.social .col-md-2 .fa-twitter {
font-size: 1.1em;
padding: 0 5px 0 20px;
}
.changePswrd {
padding: 3px 0 0 12px;
}
.changePswrd a:link {
font-family: 'Lato', verdana, sans-serif;
font-size: 1.3em;
color: #fff;
display: inline-block;
}
.changePswrd a:hover {
text-decoration: none;
color: #FF5500;
}
.form-group .placeholder-img.col-md-2 {
height: 320px;
width: 230px;
background-color: #4d4d4d;
margin: 0 20px;
}
.form-group .placeholder-img-thumb {
height: 320px;
}
.form-group .placeholder-img-thumb .thumb-img {
text-align: center;
width: 130px;
}
.form-group .placeholder-img-thumb .circle {
width: 130px;
height: 130px;
background: #4d4d4d;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.form-group .placeholder-img-thumb .caption {
width: 100%;
color: #fff;
}
.form-group .profile-photo-help.col-md-4 {
width: 200px;
}
.form-group .profile-photo-help {
width: 280px;
color: #fff;
}
.form-group .profile-photo-help p {} .form-group .profile-photo-help a:link {
color: #FF5500;
text-decoration: none;
}
.form-group .profile-photo-help a:hover {
color: #fff;
}
.form-group .create-card-btn .glyphicon-plus {
font-size: 0.9em;
padding: 0 10px 0 0;
}
.form-group .input-group.date span.input-group-addon {
background-color: #4d4d4d;
color: #fff;
border: none;
border-radius: 3px;
border-color: none;
}
.form-group .input-group.date .form-control.date {
font-size: 1.2em;
}
.form-group .strength-delete-btn .glyphicon-minus {
font-size: 0.9em;
padding: 0 5px 0 0;
}
/* SUBMISSION BUTTONS */
.submission {
background-color: #333333;
border-top: 1px solid #4d4d4d;
margin-top: 80px;
padding-top: 40px;
padding-bottom: 40px;
}
.submission button {
border-radius: 3px;
font-size: 1.5em;
border: none;
}
.submission .glyphicon-remove-circle,
.submission .glyphicon-ok-circle {
font-size: 1.6em;
font-weight: 400;
vertical-align: middle;
padding: 0 5px;
color: #fff;
}
.submission .btn-cancel {
margin-right: 20px;
background-color: #4d4d4d;
}
.submission .btn-save {
background-color: #aaa;
}
.submission .action-btns .btn-primary:hover,
.submission .action-btns .btn-primary.outline:focus,
.btn-primary:active {
color: #33a6cc;
border-color: #fff;
}
.submission .action-btns .btn-primary:active,
.submission .action-btns .btn-primary.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
.btn.outline {
background: none;
padding: 12px 22px;
}
.btn.outline.upload {
position: absolute;
bottom: 0;
padding: 5px 40px 5px 40px;
}
.btn.outline.football {
background: none;
padding: 5px 22px;
margin-right: 20px;
}
.btn.outline.create-card-btn {
background: none;
padding: 5px 22px;
}
.btn.outline.sizing-guide-btn {
background: none;
padding: 5px 22px;
}
.btn.outline.strength-delete-btn {
background: none;
padding: 5px 22px;
width: 100%
}
.btn.outline.add-result-btn {
background: none;
padding: 5px 22px;
margin-top: 15px;
}
.btn-primary.outline {
border: 1px solid #fff;
color: #fff;
font-family: 'Lato', verdana, sans-serif;
font-size: 1.1em;
}
.btn-primary.outline.strength-delete-btn {
border: 1px solid #4d4d4d;
color: #4d4d4d;
}
.btn-primary.outline:hover,
.btn-primary.outline:focus,
.btn-primary.outline:active,
.btn-primary.outline.active,
.open > .dropdown-toggle.btn-primary {
color: #FF5500;
border-color: #F47929;
}
.btn-primary.outline:active,
.btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
/* CUSTOM SUBMISSION BTN VALUES */
.btn-primary {
padding: 14px 24px;
border: 0 none;
}
.btn:focus,
.btn:active:focus,
.btn.active:focus {
outline: 0 none;
}<head>
<title>layout</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-md-12">
<h1>Heading 1</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 accordion sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="account2.html" href="#collapseOne"> Link 1 </a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo">Title 2</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseThree">Title 3</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFive">Title 4</a>
</h4>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseSix">Title 5
</a>
</h4>
</div>
</div>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="container load">
<div class="col-lg-10">
<div class="wrapper">
<div class="row">
<div class="col-md-10">
<h2>Page Title</h2>
<div class="form-horizontal" role="form" action="/details" method="post">
<div class="form-group">
<h3 class="inner">General</h3>
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="" placeholder="title" focus>
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Information</h3>
<p>
Info titletitletitletitletitletitletitletitletitle</br>
titletitletitletitletitletitletitletitletitletitletitletitletitletitletitle
</p>
</div>
<div class="form-group">
<h3 class="inner">Address</h3>
<label for="unit" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="1">
</div>
</div>
<div class="form-group">
<label for="streetNo" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="25">
</div>
</div>
<div class="form-group">
<label for="streetName" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="streetName" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="suburb" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="suburb" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="zip" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="zip" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="state" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="state" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Social Networks</h3>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="instagram" class="control-label custom-label"><span><i class="fa fa-instagram"></i></span> Instagram</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="instagram-input" placeholder="instagramhandle">
</div>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="twitter" class="control-label custom-label"><span><i class="fa fa-twitter"></i></span> Twitter</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="twitter-input" placeholder="twitterhandle">
</div>
</div>
<div class="row submission">
<div class="form-group btn-block">
<div class="pull-right">
<button type="button" class="btn btn-default btn-lg btn-cancel ">Cancel changes</button>
<button type="button" class="btn btn-default btn-lg btn-save">Save changes</button>
</div>
</div>
</div>
</div>
<!-- end of form -->
</div>
</div>
<!-- end of row -->
<!-- </div> end of container -->
</div>
</div>
</div>
<!-- end of container -->最佳答案
body {
background-color: #ccc;
}
/* General styles */
.container { background-color: #bbb; font-family: arial, verdana, sans-serif; width: 1530px; margin: 0 auto; }
/* Large desktop */
@media and screen (max-width: 1590px) {
.container {width: auto;}
}
@media and screen (min-width: 981px) and (max-width: 1530px){
.accordion.sidebar {width: 230px;
}
}
@media and screen(max-width: 980px) {
}
.col-md-10{ border-left: 1px solid #4d4d4d; padding: 0; margin: 0;}
.container .row.header{ color: #fff; border-bottom: 6px solid #fff }
.container .row.header h1 { padding: 30px 0; font-size: 3.5em; font-weight: 300; }
h2 { color: #fff; font-size: 32px; }
h3 {color: #ccc; font-size: 30px; padding-bottom: 10px; }
h3.inner { padding-left: 15px;}
h4 {color: #ccc; font-size: 22px; }
.headers { border-top: 1px solid #ccc; margin-top: 50px; margin-bottom:30px;}
.headers h1 { padding: 20px 0 0 0; }
.headers p {font-size: 1.6em; color: #fff; padding: 0 0 10px 0; margin: 0;}
/* ****** NAVIGATION SIDEBAR ********
**********************************
*/
.accordion.sidebar { padding: 0; background-color: #fff;}
.panel {border-radius: 0 !important; border: 0; font-family: 'Lato', Arial, sans-serif; font-weight: 400}
.panel-group {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff}
.panel-heading h4.panel-title {border-radius: 0; //box-shadow: 1px 1px 3px #074f68; border: 0; background-color: #fff;}
.panel-heading h4.panel-title a:link { margin-left: 10px; text-decoration: none; font-weight: bold; font-size: 20px}
.panel-heading h4.panel-title a:active {color: #fff }
.panel-heading h4.panel-title a:hover {color: #FF5500}
.panel-group .panel+.panel {margin-top: 0px !important; border-top: 1px solid #ccc}
.panel.panel-default.custom .panel-heading { background: #fff; color: #000; border-color: #fff }
.panel-body {/* padding-top: 2px !important; padding-bottom: 0px !important; */ padding: 0px !important; border: 0 }
.panel-body ul { margin: 0; padding: 0 }
.panel-body ul li { padding: 10px 0 !important; border-bottom: 1px solid #ccc; font-size: 1.4em}
.panel-body ul li:last-child {border-bottom: 0}
.panel-body ul a { color: #1f1f1f}
.panel-body ul li a:link { margin-left: 40px !important; color: #1f1f1f}
.panel-body ul li a:active {color: #fff}
.panel-body ul li a:hover {text-decoration: none; color: #FF5500 }
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse { border: 0 !important; padding: 0}
.panel-heading.collapsed { background-color: #222222}
/* ******** FORM STYLING ***********
************************************
*/
.form-horizontal .form-group .custom-label{ text-align: left; margin-top: -10px; font-size: 22px; font-weight: normal; color: #fff; }
.form-horizontal .form-group .form-control { background-color: #4d4d4d; border-color: #4d4d4d; color: #fff; border-radius: 3px;}
.form-horizontal .form-group .input-text { font-size: 1.3em; color: #fff;}
.form-horizontal .form-group .form-control:hover { background-color: #34383C; border: 1px solid #4d4d4d;}
.form-horizontal .form-group .form-control:focus { border: 1px solid #FF5500; }
/* DROPDOWN MENU STYLING */
/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret { /* position: absolute; right: 12px; top: calc(50% - 2px); */ background-image: url('arr.jpg'); background-repeat: no-repeat; position: absolute; right: 12px; top: calc(50% - 2px);}
.form-group.social .col-md-2 { padding: 0; margin: 0; width: 200px;}
.form-group.social .col-md-2 .fa-instagram, .form-group.social .col-md-2 .fa-twitter { font-size: 1.1em; padding: 0 5px 0 20px;}
.changePswrd {padding: 3px 0 0 12px;}
.changePswrd a:link{ font-family: 'Lato', verdana, sans-serif; font-size: 1.3em; color: #fff; display: inline-block; }
.changePswrd a:hover{ text-decoration: none; color: #FF5500; }
.form-group .placeholder-img.col-md-2{ height: 320px; width: 230px; background-color: #4d4d4d; margin: 0 20px;}
.form-group .placeholder-img-thumb { height: 320px;}
.form-group .placeholder-img-thumb .thumb-img { text-align: center; width: 130px;}
.form-group .placeholder-img-thumb .circle { width: 130px; height: 130px; background: #4d4d4d; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }
.form-group .placeholder-img-thumb .caption { width: 100%; color: #fff;}
.form-group .profile-photo-help.col-md-4 { width: 200px;}
.form-group .profile-photo-help { width: 280px; color: #fff;}
.form-group .profile-photo-help p {}
.form-group .profile-photo-help a:link { color: #FF5500; text-decoration: none; }
.form-group .profile-photo-help a:hover { color: #fff; }
.form-group .create-card-btn .glyphicon-plus { font-size: 0.9em; padding: 0 10px 0 0;}
.form-group .input-group.date span.input-group-addon { background-color: #4d4d4d; color: #fff; border: none; border-radius: 3px; border-color: none;}
.form-group .input-group.date .form-control.date { font-size: 1.2em;}
.form-group .strength-delete-btn .glyphicon-minus { font-size: 0.9em; padding: 0 5px 0 0;}
/* SUBMISSION BUTTONS */
.submission { background-color: #333333; border-top: 1px solid #4d4d4d; margin-top: 80px; padding-top: 40px; padding-bottom: 40px;}
.submission button{ border-radius: 3px; font-size: 1.5em; border: none;}
.submission .glyphicon-remove-circle, .submission .glyphicon-ok-circle {font-size: 1.6em; font-weight: 400; vertical-align: middle; padding: 0 5px; color: #fff;}
.submission .btn-cancel {margin-right: 20px; background-color: #4d4d4d;}
.submission .btn-save {background-color: #aaa; }
.submission .action-btns .btn-primary:hover, .submission .action-btns .btn-primary.outline:focus, .btn-primary:active { color: #33a6cc; border-color: #fff; }
.submission .action-btns .btn-primary:active, .submission .action-btns .btn-primary.active { border-color: #007299; color: #007299; box-shadow: none; }
.btn.outline { background: none; padding: 12px 22px; }
.btn.outline.upload { position: absolute; bottom: 0; padding: 5px 40px 5px 40px; }
.btn.outline.football { background: none; padding: 5px 22px; margin-right: 20px;}
.btn.outline.create-card-btn {background: none; padding: 5px 22px; }
.btn.outline.sizing-guide-btn { background: none; padding: 5px 22px; }
.btn.outline.strength-delete-btn { background: none; padding: 5px 22px; width: 100%}
.btn.outline.add-result-btn { background: none; padding: 5px 22px; margin-top: 15px;}
.btn-primary.outline { border: 1px solid #fff; color: #fff; font-family: 'Lato', verdana, sans-serif; font-size: 1.1em;}
.btn-primary.outline.strength-delete-btn { border: 1px solid #4d4d4d; color: #4d4d4d;}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary { color: #FF5500; border-color: #F47929; }
.btn-primary.outline:active, .btn-primary.outline.active { border-color: #007299; color: #007299; box-shadow: none; }
/* CUSTOM SUBMISSION BTN VALUES */
.btn-primary { padding: 14px 24px; border: 0 none; }
.btn:focus, .btn:active:focus, .btn.active:focus { outline: 0 none; } <head>
<title>CUSTOM LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="custom-styles.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!-- **********************************
following functionality for the accordion referencing to load individual
body of parent links
************************************
-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<!-- script for navigation load of individual body sections -->
<script src="accordion.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/i18n/defaults-*.min.js"></script>
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-md-12">
<h1>Heading 1</h1>
</div>
</div>
<div class="row">
<div class="col-md-2 accordion sidebar">
<div class="panel-group" id="accordion">
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="account2.html" href="#collapseOne">
Link 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo">
Title 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseThree">
Title 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<ul class="list-unstyled">
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
<li><a href=""> sub-link</a>
</ul>
</div>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseFive">
Title 4
</a>
</h4>
</div>
</div>
<div class="panel panel-default custom">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseSix">
Title 5
</a>
</h4>
</div>
</div>
</div>
<!-- end of sidebar -->
</div>
<!-- end of row -->
<div class="container load">
<div class="col-lg-10">
<div class="wrapper">
<div class="row">
<div class="col-md-10">
<h2>Page Title</h2>
<div class="form-horizontal" role="form" action="/details" method="post">
<div class="form-group">
<h3 class="inner">General</h3>
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="" placeholder="title" focus>
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="title" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Information</h3>
<p>
Info titletitletitletitletitletitletitletitletitle </br>
titletitletitletitletitletitletitletitletitletitletitletitletitletitletitle
</p>
</div>
<div class="form-group">
<h3 class="inner">Address</h3>
<label for="unit" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="1">
</div>
</div>
<div class="form-group">
<label for="streetNo" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="title" placeholder="25">
</div>
</div>
<div class="form-group">
<label for="streetName" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="streetName" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="suburb" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="suburb" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="zip" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="zip" placeholder="title">
</div>
</div>
<div class="form-group">
<label for="state" class="col-md-2 col-sm-2 control-label custom-label">title</label>
<div class="col-md-6 col-sm-6">
<input type="text" class="form-control input-text" id="state" placeholder="title">
</div>
</div>
<div class="headers">
<h3>Social Networks</h3>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="instagram" class="control-label custom-label"><span><i class="fa fa-instagram"></i></span> Instagram</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="instagram-input" placeholder="instagramhandle">
</div>
</div>
<div class="form-group social">
<div class="col-md-2 col-sm-2">
<label for="twitter" class="control-label custom-label"><span><i class="fa fa-twitter"></i></span> Twitter</label>
</div>
<div class="col-md-5 col-sm-5">
<input type="text" class="form-control input-text" id="twitter-input" placeholder="twitterhandle">
</div>
</div>
<div class="row submission">
<div class="form-group btn-block">
<div class="pull-right">
<button type="button" class="btn btn-default btn-lg btn-cancel ">Cancel changes</button>
<button type="button" class="btn btn-default btn-lg btn-save">Save changes</button>
</div>
</div>
</div>
</div> <!-- end of form -->
</div>
</div> <!-- end of row -->
<!-- </div> end of container -->
</div>
</div>
</div>
<!-- end of container --> 关于html - Bootstrap自定义布局右列环绕在左列下方，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37116784/