html - 带有 Bootstrap 的自定义布局，表单缺乏响应能力

我有一个 bootstrap 布局，其中包含用于主要内容区域的左栏侧边栏和右栏。

我的侧边栏有一个 min-width: 260px; max-width: 260px; 我的主要内容有 width:calc(100% - 260px);

现在是主要的内容表单，如您所见，当您减小浏览器宽度(全屏查看然后减小)时，元素会与浏览器同步减小并强制标签下拉并使表单-控件与标签重叠，每个按钮的文本都溢出到边界外，看起来很难看。

有没有一种我可以做的简单方法，与我的侧边栏宽度保持一致，使此表单在浏览器减小时响应更好，直到它达到 992px 断点(进入移动 View )？

我自己尝试过各种使用媒体查询的方法，但发现在布局和包含适当的断点方面具有挑战性。

html * {
  box-sizing: border-box;
}
html,
body {
  font-family: 'Lato-Black', verdana, sans-serif;
  background-color: #fff;
  color: #fff;
  font-size: 14px;
  height: 100%;
}
/* 
------
------ General styles ----------------------------------------------------------
------
*/

/* .container-fluid.outer {padding-top: 90px; } */

.container-fluid {
  min-height: 100%;
  /* width: 1530px; margin: 0 auto;  */
}
.full {
  background-color: #000;
}
/* PageFrame div */

#main .content-load {
  background-color: #000;
}
/* Large desktop */

@media (max-width: 1590px) {
  .banner-wrap {
    background-size: cover !important;
    max-width: 100% !important;
  }
}
@media (max-width: 981px) {}@media (min-width: 992px) {
  #sidebar {
    width: inherit;
    min-width: 260px;
    max-width: 260px;
    background-color: #000;
    float: left;
    height: 100%;
    position: relative;
    overflow: auto;
  }
  #main {
    width: calc(100% - 260px);
  }
}
/*
------
------ Profile Edit/Backend Pages -----------------------------------------------------------
------
*/

em.orange {
  font-style: normal;
  color: #ff5500;
}
.primary-header {
  color: #fff;
  border-bottom: 6px solid #fff;
  background-color: #000;
}
.primary-header h1 {
  padding: 30px 0;
  font-size: 48px;
}
.main-content {
  padding-left: 15px;
  padding-right: 15px;
}
.main-content h2 {
  color: #fff;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.main-content h3 {
  color: #FF5500;
  font-size: 33px;
  padding-bottom: 10px;
}
.main-content h3.white {
  color: #fff;
  font-size: 24px;
  padding-bottom: 10px;
  margin-top: 0;
}
.main-content h4 {
  color: #FF5500;
  font-size: 30px;
  font-weight: bold;
}
.main-content h4.white {
  color: #fff;
  font-size: 30px;
}
.main-content .form-horizontal .form-group h1.inner {
  padding: 20px 0 0 0;
}
.main-content .form-horizontal .form-group h3.inner {
  padding: 0 0 0 15px;
  font-size: 30px;
}
.main-content .form-horizontal .form-group h4.inner {
  font-size: 1.9em;
  padding-top: 10px;
  padding-left: 15px;
  padding-bottom: 10px;
}
.main-content .form-horizontal h4.inner-white {
  color: #fff;
  padding-top: 10px;
  padding-bottom: 5px;
}
.main-content hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #999999;
  margin: 30px 0 20px 0;
  padding: 0;
}
.main-content hr.soft {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #444444;
  margin: 20px 0 20px 0;
  padding: 0;
}
.main-content hr.divider {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #4d4d4d;
  margin: 0.5em 0 0.5em 0;
  padding: 0;
}
.tab-content hr.orange {
  border-color: #ff5500;
  margin-top: 50px;
  padding-bottom: 10px;
}
.news {
  padding-left: 0;
}
.glyphicon-plus {
  font-size: 20px;
  padding: 0 5px 0 0;
}
.glyphicon-minus {
  font-size: 20px;
  padding: 0 5px 0 0;
}
.glyphicon-pencil {
  padding: 0 8px 0 0;
}
/* 
---------
--------- Secondary Navigation Sidebar --------------------------------------------
---------
*/

#sidebar {
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  background-color: #fff;
}
#accordion {
  border: 0;
  background-color: #000;
}
.panel {
  border-radius: 0 !important;
  border: 0;
  box-shadow: none;
}
.panel-group {
  border-radius: 0;
  /* box-shadow: 1px 1px 3px #074f68; */
  border: 0;
  background-color: #fff;
  margin-bottom: 0;
}
.panel-group .panel+.panel {
  margin-top: 0px !important;
  border-top: 0;
}
.panel.panel-default.custom .panel-heading {
  background: #fff;
  color: #fff;
  border-radius: 0;
}
.panel-heading {
  padding-top: 20px;
  padding-bottom: 20px;
}
.panel-heading h4.panel-title {
  border-radius: 0;
  border: 0;
  background-color: #fff;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.panel-heading h4.panel-title a:link {
  margin-left: 10px;
  text-decoration: none;
  font-size: 20px;
}
.panel-heading h4.panel-title a:active {
  color: #fff;
  background-color: #fff;
}
.panel-heading h4.panel-title a:hover {
  color: #aaa;
}
.panel-heading.collapsed {
  background-color: #fff;
}
.panel-heading + .panel-collapse > .panel-body {
  border-top: 1px solid #aaa !important;
}
.panel-body {
  padding: 0px !important;
  border: 0;
}
.panel-body ul {
  margin: 0;
  padding: 0
}
.panel-body ul li {
  padding: 20px 0 !important;
  background-color: #aaa;
  border-bottom: 0;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.panel-body ul li:last-child {
  border-bottom: 0
}
.panel-body ul a {
  color: #fff;
}
.panel-body ul li a:link {
  margin-left: 40px !important;
  color: #1f1f1f
}
.panel-body ul li a:hover {
  text-decoration: none;
  color: #333333;
}
#collapseOne.panel-collapse,
#collapseTwo.panel-collapse,
#collapseThree.panel-collapse {
  padding: 0
}
.active[accordion-group] .panel-heading {
  background-color: #ff5500;
}
/* 
-------
------- Form Styling ---------------------------------------------------------------
-------
*/

legend {
  border: 0;
  color: #aaa;
  font-size: 27px;
  padding-left: 15px;
  text-transform: uppercase;
  letter-spacing: 3px;
}
.form-horizontal .form-group .custom-label {
  text-align: left;
  margin-top: -8px;
  font-size: 20px;
  color: #fff;
  font-family: 'Lato-Regular', verdana, sans-serif;
}
.form-horizontal .form-group .custom-label.media {
  padding-top: 20px;
}
.form-horizontal .form-group .form-control {
  background-color: #4d4d4d;
  border: none;
  border-radius: 3px;
  font-size: 22px;
  color: #fff;
  font-family: 'Lato-Regular', verdana, sans-serif;
}
.form-horizontal .form-group .form-control placeholder {
  color: #fff;
}
.form-horizontal .form-group .form-control:hover {
  border: 0;
  background: #34383c;
}
.form-horizontal .form-group .form-control:focus {
  border: 0;
  box-shadow: none;
}
.form-horizontal .form-group .changePswrd {
  margin-top: 2px;
  font-size: 20px;
}
.form-horizontal .form-group .changePswrd a:link {
  color: #fff;
  display: inline-block;
}
.form-horizontal .form-group .changePswrd a:hover {
  text-decoration: none;
  color: #aaa;
}
/* account page targets */

.form-horizontal .form-group.social .col-md-2 .fa-instagram,
.form-horizontal .form-group.social .col-md-2 .fa-twitter {
  font-size: 40px;
  vertical-align: top;
  margin-right: 10px;
}
/* Custom Radio Buttons */

.form-horizontal .form-group.radio-btns {} .form-horizontal .form-group .radio.radio-inline {
  margin-top: 0;
}
.form-horizontal .form-group .radio {
  padding-left: 20px;
}
.form-horizontal .form-group .radio:last-child {
  margin-left: 40px;
}
.form-horizontal .form-group .radio label {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  padding-left: 12px;
  font-size: 22px;
}
.form-horizontal .form-group .radio label::before {
  content: "";
  display: inline-block;
  position: absolute;
  width: 24px;
  height: 24px;
  left: 0;
  margin-left: -20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background-color: #303030;
}
.form-horizontal .form-group .radio label::after {
  display: inline-block;
  position: absolute;
  content: " ";
  width: 14px;
  height: 14px;
  left: 5px;
  top: 5px;
  margin-left: -20px;
  border-radius: 50%;
  background-color: #aaa;
  -webkit-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
  transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}
.form-horizontal .form-group .radio input[type="radio"] {
  opacity: 0;
  z-index: 1;
}
.form-horizontal .form-group .radio input[type="radio"]:focus + label::before {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.form-horizontal .form-group .radio input[type="radio"]:checked + label::after {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  transform: scale(1, 1);
}
.form-horizontal .form-group .radio input[type="radio"]:disabled + label {
  opacity: 0.65;
}
.form-horizontal .form-group .radio input[type="radio"]:disabled + label::before {
  cursor: not-allowed;
}
.form-horizontal .inner-form {
  padding-left: 0;
}
/*
-------
------- Footer -------------------------------------------------------------------
-------
*/

.footer {
  background-color: #333333;
  border-top: 1px solid #4d4d4d;
  margin-top: 80px;
  padding-top: 40px;
  padding-bottom: 20px;
  padding-right: 40px;
}
.footer button {
  letter-spacing: 1px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.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"></script>

<div class="container-fluid">
  <div class="container-fluid">
    <div class="row full">
      <div class="top">
        <div class="col-md-12 header">
          <h1>Details</h1>
        </div>
      </div>
      <div id="sidebar" class="col-md-2">
        <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"  href="#collapseOne">
									  Page Link
									  </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">
									  Another Page Link
									  </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>

        <!-- end of sidebar -->
      </div>
      <div id="main" class="col-md-9">
        <div class="row">
          <div class="col-md-12 content-load">

            <!-- body content loaded into test.html -->
            <div class="main-content">
              <h2>details</h2>
              <form class="form-horizontal" role="form" action="/profile" method="post">
                <div class="fieldset form-group">
                  <legend>heading section</legend>
                  <label for="fname" class="col-md-2 control-label custom-label">First name*</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg firstname" id="input-fname" placeholder="Firstname" focus>
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="lname" class="col-md-2 control-label custom-label">Last name*</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg" id="input-lname" placeholder="Lastname">
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="email" class="col-md-2 control-label custom-label">Email*</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg" id="input-email" placeholder="email">
                  </div>


                  <div class="col-md-2 custom-col-small">
                    <div class="btn-group-justified selection-radio btn-md" role="group" aria-label="Justified button group" data-toggle="buttons">
                      <label class="btn btn-primary btn-lg">
                        <input type="radio" name="options" id="option1" autocomplete="off">Private</label>
                      <label class="btn btn-primary btn-lg">
                        <input type="radio" name="options" id="option2" autocomplete="off">Public</label>
                    </div>
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="password" class="col-md-2 control-label custom-label">Password*</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg" id="input-password" placeholder="Password">
                  </div>

                  <div class="col-md-2 col-sm-4 col-xs-4  custom-col-small">
                    <button type="text" class="btn btn-default btn-lg changePswrd btn-block">Change Password</button>
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="nationality" class="col-md-2 control-label custom-label">Nationality*</label>
                  <div class="col-md-6">
                    <select class="wide">
                      <option data-display="Select Language"></option>
                      <option value="1">English (Australia)</option>
                      <option value="2">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                    </select>
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="gender" class="col-md-2 control-label custom-label gender-label">Gender*</label>

                  <div class="col-md-2  radio-btns">
                    <input type="radio" name="sex" id="opt-female" value="Female" />
                    <label for="opt-female" class="inline-label female-label"><span class="text">Female</span>
                    </label>
                    <input type="radio" name="sex" id="opt-male" value="Male" />
                    <label for="opt-male" class="inline-label male-label"><span class="text">Male</span>
                    </label>
                  </div>

                  <div class="input-set">
                    <div class="col-md-1 col-xs-1">
                      <input type="radio" name="sex" id="opt-other" value="Other" />
                      <label for="opt-other" class="inline-label radio-select"></label>
                    </div>
                    <div class="col-md-3 col-sm-11 col-xs-12">
                      <select class="wide">
                        <option data-display="Other"></option>
                        <option value="1">LGBT</option>
                        <option value="2">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                        <option value="4">Another option</option>
                      </select>
                    </div>
                  </div>

                  <div class="col-md-2 custom-col-small">
                    <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons">
                      <label class="btn btn-primary btn-lg">
                        <input type="radio" name="options" id="option1" autocomplete="off">Private</label>
                      <label class="btn btn-primary btn-lg">
                        <input type="radio" name="options" id="option2" autocomplete="off">Public</label>
                    </div>
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="account" class="col-md-2 control-label custom-label">Account Type</label>
                  <div class="col-md-6">
                    <select class="wide">
                      <option data-display="Select account type"></option>
                      <option value="1">option</option>
                      <option value="2">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                    </select>
                  </div>
                </div>

                <div class="fieldset form-group">
                  <legend>heading section</legend>
                  <label for="nextOfKin-fn" class="col-md-2 control-label custom-label">First name</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg" id="input-nextOfKin-fn" placeholder="First name">
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="nextOfKin-ln" class="col-md-2 control-label custom-label">Last Name</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg" id="input-nextOfKin-ln" placeholder="Last name">
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="nextOfKin-phone" class="col-md-2 control-label custom-label">Contact number</label>
                  <div class="col-md-2">
                    <select class="wide">
                      <option data-display="Select No"></option>
                      <option value="1">Aus (+61)</option>
                      <option value="2">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                    </select>
                  </div>
                  <div class="col-md-4">
                    <input type="text" class="form-control input-text input-lg" id="input-landline" placeholder="number">
                  </div>
                </div>

                <div class="fieldset form-group">
                  <legend>heading section</legend>
                  <label for="educationLevel" class="col-md-2 control-label custom-label">Education Level</label>
                  <div class="col-md-6">
                    <select class="wide">
                      <option data-display="Select level"></option>
                      <option value="1">Tertiary</option>
                      <option value="2">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                      <option value="4">Another option</option>
                    </select>
                  </div>
                </div>

                <div class="fieldset form-group">
                  <label for="institute" class="col-md-2 control-label custom-label">Institution name</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg" id="input-instituteName" placeholder="University">
                  </div>
                </div>

                <div class="fieldset form-group social">
                  <legend>heading section</legend>
                  <label for="instagram" class="col-md-2 control-label custom-label with-icons"><span><i class="fa fa-instagram"></i></span> Instagram</label>

                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg" id="instagram-input" placeholder="@instagramname">
                  </div>

                  <div class="col-md-2 custom-col-small">
                    <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons">
                      <label class="btn btn-primary btn-lg">
                        <input type="radio" name="options" id="option1" autocomplete="off">Private</label>
                      <label class="btn btn-primary btn-lg">
                        <input type="radio" name="options" id="option2" autocomplete="off">Public</label>
                    </div>
                  </div>
                </div>

                <div class="fieldset form-group social">
                  <label for="twitter" class="col-md-2 control-label custom-label with-icons"><span><i class="fa fa-twitter"></i></span> Twitter</label>
                  <div class="col-md-6">
                    <input type="text" class="form-control input-text input-lg" id="twitter-input" placeholder="@twittername">
                  </div>

                  <div class="col-md-2 custom-col-small">
                    <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons">
                      <label class="btn btn-primary btn-lg">
                        <input type="radio" name="options" id="option1" autocomplete="off">Private</label>
                      <label class="btn btn-primary btn-lg">
                        <input type="radio" name="options" id="option2" autocomplete="off">Public</label>
                    </div>
                  </div>
                </div>
            </div>
            <!-- end of main-content -->

            <div class="row footer">
              <div class="fieldset form-group btn-block">
                <div class="pull-right">
                  <button type="submit" class="btn btn-default btn-lg btn-publish">submit</button>
                </div>
              </div>
            </div>
            </form>
            <!-- end of form -->
          </div>
        </div>
      </div>
    </div>
    <!-- end of row full -->
  </div>
</div>

最佳答案

确实有几个方面需要注意，所以不要将此解释为对任何形式的严厉批评，这只是为了提供帮助。

验证您的 HTML，因为存在许多错误，例如未关闭项(div 和列表项)，多次使用相同的 ID，等等。您随时可以在这里手动检查 → Nu HTML Checker如果您不使用构建系统或内部支持此功能的 IDE/编辑器。
就响应速度而言，您并未利用所有列可通过 Bootstraps 12 列网格和(尽我所能告诉)对于这个特定的用例，不需要多次嵌套。为了大多数情况下，您只使用了 12 列中的 8 列可用的。使用剩余的列将基本上纠正形成您所看到的响应式问题。
至少要考虑的另一个方面是标记和样式不是一致(这可能是出于与问题; 一个 jQuery 插件的使用)但无论如何我都会谈到它)。你可以(理论上至少) 通过使用一些内置的类来避免让你自己头疼跨越所有表单输入(即 form-control input-lg)是否文本，select等(见 Control Sizing )。和同样的想法也适用于您的单选按钮，因为您正在使用内置的 JavaScript 插件进行一些准备就绪的单选输入 ( Button-Checkbox-Radio)。

这里有两个可以提供基础的工作示例(必须缩小它们以满足 SO 字符限制)。

示例 I:利用列的边栏

html *{box-sizing:border-box}body,html{font-family:Lato-Black,verdana,sans-serif;background-color:#fff;color:#fff;font-size:14px;height:100%}.container-fluid{min-height:100%}.header,.inline-label{color:#fff}#main .content-load,.full{background-color:#000}@media (min-width:992px){#sidebar{width:inherit;min-width:260px;max-width:260px;background-color:#000;float:left;height:100%;position:relative;overflow:auto}#main{width:calc(100% - 260px)}}.main-content{padding-left:15px;padding-right:15px}.main-content h2{color:#fff;font-size:40px;text-transform:uppercase;letter-spacing:2px}#sidebar{padding-left:0;padding-right:0;margin:0;background-color:#fff}.panel-group .panel{border-radius:0;border:0;background-color:#fff;margin-bottom:0}.panel-group .panel+.panel{margin-top:0;border-top:0}.panel-group .panel .panel-heading{background:#fff;color:#fff;border-radius:0;padding-top:20px;padding-bottom:20px}.panel-group .panel .panel-heading .panel-title{border-radius:0;border:0;background-color:#fff;color:#000;text-transform:uppercase;letter-spacing:3px}.panel-group .panel .panel-heading .panel-title a:link{margin-left:10px;text-decoration:none;font-size:20px}.panel-group .panel .panel-heading .panel-title a:active{color:#fff;background-color:#fff}.panel-group .panel .panel-heading .panel-title a:hover{color:#aaa}.panel-group .panel .panel-heading.collapsed{background-color:#fff}.panel-group .panel .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #aaa}.panel-group .panel .panel-body{padding:0;border:0}.panel-group .panel .panel-body ul{margin:0;padding:0}.panel-group .panel .panel-body ul>li{padding:20px 40px;background-color:#aaa;border-bottom:0;font-size:18px;text-transform:uppercase;letter-spacing:3px}.panel-group .panel .panel-body ul>li:last-child{border-bottom:0}.panel-group .panel .panel-body ul>li>a{color:#fff}.panel-group .panel .panel-body ul>li>a:link{color:#1f1f1f}.panel-group .panel .panel-body ul>li>a:hover{text-decoration:none;color:#333}.panel-group .panel #collapseOne.panel-collapse,.panel-group .panel #collapseThree.panel-collapse,.panel-group .panel #collapseTwo.panel-collapse{padding:0}.active[accordion-group] .panel-heading{background-color:#f50}.heading{border:0;color:#aaa;font-size:27px;padding-left:15px;text-transform:uppercase;letter-spacing:3px}.form-horizontal .form-group .custom-label,.form-horizontal .form-group .form-control{font-family:Lato-Regular,verdana,sans-serif;text-transform:capitalize;color:#fff}.form-horizontal .form-group .custom-label{text-align:left;font-size:20px}.form-horizontal .form-group .form-control{background-color:#4d4d4d;border:none;border-radius:3px;font-size:22px}.form-horizontal .form-group .form-control placeholder{color:#fff}.form-horizontal .form-group .form-control:hover{border:0;background:#34383c}.form-horizontal .form-group .form-control:focus{border:0;box-shadow:none}.footer{background-color:#333;border-top:1px solid #4d4d4d;padding:20px;width:100%;text-align:right}.footer button{letter-spacing:1px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="container-fluid"> <div class="row full"> <div class="top"> <div class="col-md-12 header"> <h1>Details</h1> </div></div><div id="sidebar" class="col-md-2"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Page Link </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><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li></ul> </div></div></div><div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo"> Page Link </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><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li></ul> </div></div></div></div></div><div id="main" class="col-md-10"> <div class="row"> <div class="content-load"> <div class="main-content"> <h2>details</h2> <form class="form-horizontal" action="/profile" method="post"> <div class="form-group"> <div class="heading">heading section</div><label for="fname" class="col-md-3 control-label custom-label">First name*</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg firstname" id="fname" placeholder="Firstname"> </div></div><div class="form-group"> <label for="lname" class="col-md-3 control-label custom-label">Last name*</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="lname" placeholder="Lastname"> </div></div><div class="form-group"> <label for="email" class="col-md-3 control-label custom-label">Email*</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="email" placeholder="email"> </div><div class="col-md-4 custom-col-small"> <div class="btn-group-justified selection-radio btn-md" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">Private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">Public </label> </div></div></div><div class="form-group"> <label for="password" class="col-md-3 control-label custom-label">Password*</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="password" placeholder="Password"> </div><div class="col-md-4"> <input type="button" class="btn btn-default btn-lg changePswrd btn-block" value="Change Password"> </div></div><div class="form-group"> <label for="nationality" class="col-md-3 control-label custom-label">Nationality*</label> <div class="col-md-9"> <select class="form-control input-lg" id="nationality"> <option value="">Select Language</option> <option value="1">English (Australia)</option> <option value="2">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> </select> </div></div><div class="form-group"> <label class="col-md-3 control-label custom-label gender-label">Gender*</label> <div class="col-md-2 radio-btns"> <input type="radio" name="sex" id="opt-female" value="Female"/> <label for="opt-female" class="inline-label female-label">Female</label> <input type="radio" name="sex" id="opt-male" value="Male"/> <label for="opt-male" class="inline-label male-label">Male</label> </div><div class="col-md-3"> <select class="form-control input-lg"> <option value="">Other</option> <option value="1">LGBT</option> <option value="2">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> </select> </div><div class="col-md-4"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">Private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">Public </label> </div></div></div><div class="form-group"> <label for="account" class="col-md-3 control-label custom-label">Account Type</label> <div class="col-md-9"> <select class="form-control input-lg" id="account"> <option value="">Select account type</option> <option value="1">option</option> <option value="2">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> </select> </div></div><div class="form-group"> <div class="heading">heading section</div><label for="nextOfKin-fn" class="col-md-3 control-label custom-label">First name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="nextOfKin-fn" placeholder="First name"> </div></div><div class="form-group"> <label for="nextOfKin-ln" class="col-md-3 control-label custom-label">Last Name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="nextOfKin-ln" placeholder="Last name"> </div></div><div class="form-group"> <label for="nextOfKin-phone" class="col-md-3 control-label custom-label">Contact number</label> <div class="col-md-6"> <select class="form-control input-lg" id="nextOfKin-phone"> <option value="">Select No</option> <option value="1">Aus (+61)</option> <option value="2">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> </select> </div><div class="col-md-3"> <input type="text" class="form-control input-text input-lg" id="input-landline" placeholder="number"> </div></div><div class="form-group"> <div class="heading">heading section</div><label for="education" class="col-md-3 control-label custom-label">Education Level</label> <div class="col-md-9"> <select class="form-control input-lg" id="education"> <option value="">Select level</option> <option value="1">Tertiary</option> <option value="2">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> <option value="4">Another option</option> </select> </div></div><div class="form-group"> <label for="institute" class="col-md-3 control-label custom-label">Institution name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="institute" placeholder="University"> </div></div><div class="form-group social"> <div class="heading">heading section</div><label for="instagram" class="col-md-3 control-label custom-label with-icons"><span><i class="fa fa-instagram"></i></span> Instagram</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="instagram" placeholder="@instagramname"> </div><div class="col-md-4 custom-col-small"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">Private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">Public </label> </div></div></div><div class="form-group social"> <label for="twitter" class="col-md-3 control-label custom-label with-icons"><span><i class="fa fa-twitter"></i></span> Twitter</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="twitter" placeholder="@twittername"> </div><div class="col-md-4 custom-col-small"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">Private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options">Public </label> </div></div></div><div class="footer"> <button type="submit" class="btn btn-default btn-lg">Submit</button> </div></form> </div></div></div></div></div></div>

示例二:不使用列的固定位置侧边栏

*{box-sizing:border-box;margin:0;padding:0}body,html{font-family:Lato-Black,verdana,sans-serif;font-size:14px;height:100%;background-color:#fff;color:#fff}body{min-height:100%;height:100%}@media (min-width:992px){div.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;min-width:260px;margin-left:260px;height:100%;background-color:#fff}div.main-content{position:relative;margin-left:260px;padding:0 15px}}div.main-content{background-color:#231F20}div.main-content h2{color:#fff;font-size:40px;text-transform:uppercase;letter-spacing:2px}div.sidebar{padding:0;margin:0;background-color:#fff}div.sidebar h1{color:#231F20;margin:0;padding:15px 20px 0;letter-spacing:3px}.panel-group .panel{border-radius:0;border:0;background-color:#fff;margin-bottom:0}.panel-group .panel+.panel{margin-top:0;border-top:0}.panel-group .panel .panel-heading{background:#fff;color:#fff;border-radius:0;padding-top:20px;padding-bottom:20px}.panel-group .panel .panel-heading .panel-title{border-radius:0;border:0;background-color:#fff;color:#000;text-transform:uppercase;letter-spacing:3px}.panel-group .panel .panel-heading .panel-title a:link{margin-left:10px;text-decoration:none;font-size:20px}.panel-group .panel .panel-heading .panel-title a:active{color:#fff;background-color:#fff}.panel-group .panel .panel-heading .panel-title a:hover{color:#aaa}.panel-group .panel .panel-heading.collapsed{background-color:#fff}.panel-group .panel .panel-heading+.panel-collapse>.panel-body{border-top:1px solid #aaa}.panel-group .panel .panel-body{padding:0;border:0}.panel-group .panel .panel-body ul{margin:0;padding:0}.panel-group .panel .panel-body ul>li{padding:20px 40px;background-color:#aaa;border-bottom:0;font-size:18px;text-transform:uppercase;letter-spacing:3px}.panel-group .panel .panel-body ul>li:last-child{border-bottom:0}.panel-group .panel .panel-body ul>li>a{color:#fff}.panel-group .panel .panel-body ul>li>a:link{color:#1f1f1f}.panel-group .panel .panel-body ul>li>a:hover{text-decoration:none;color:#333}.panel-group .panel #collapseOne.panel-collapse,.panel-group .panel #collapseThree.panel-collapse,.panel-group .panel #collapseTwo.panel-collapse{padding:0}.active[accordion-group] .panel-heading{background-color:#f50}.form-heading{border:0;color:#aaa;font-size:26px;padding:0 0 10px 15px;text-transform:uppercase;letter-spacing:3px}.form-horizontal .form-group .custom-label{text-align:left;font-size:20px;color:#fff;font-family:Lato-Regular,verdana,sans-serif}.form-horizontal .form-group .form-control{background-color:#4d4d4d;border:none;border-radius:0;font-size:16px;color:#fff;font-family:Lato-Regular,verdana,sans-serif}.form-horizontal .btn{border-radius:0;height:50px}.form-horizontal .form-group .form-control placeholder{color:#fff}.form-horizontal .form-group .form-control:hover{border:0;background:#34383c}.form-horizontal .form-group .form-control:focus{border:0;box-shadow:none}.submit-block{background-color:#333;border-top:1px solid #4d4d4d;padding:20px}.submit-block .btn-publish{letter-spacing:1px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><div class="sidebar"> <h1>Details</h1> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Page Link </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><li><a href="#"> sub link</a> </li><li><a href="#"> sub link</a> </li></ul> </div></div></div><div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" data-htmlref="#" href="#collapseTwo"> Page Link </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><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li><li><a href=""> sub link</a> </li></ul> </div></div></div></div></div><div class="container-fluid main-content"> <h2>details</h2> <form class="form-horizontal" action="/profile" method="post"> <div class="form-group"> <div class="form-heading">heading section</div><label for="fname" class="col-md-3 control-label custom-label">First name*</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" name="fname" id="fname" placeholder="First Name"> </div></div><div class="form-group"> <label for="lname" class="col-md-3 control-label custom-label">Last name*</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" name="lname" id="lname" placeholder="Last Name"> </div></div><div class="form-group"> <label for="email" class="col-md-3 control-label custom-label">Email*</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" name="email" id="email" placeholder="Email"> </div><div class="col-md-4"> <div class="btn-group-justified selection-radio btn-md" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option1">Private </label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options" id="option2">Public </label> </div></div></div><div class="form-group"> <label for="password" class="col-md-3 control-label custom-label">Password*</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" name="password" id="password" placeholder="Password"> </div><div class="col-md-4"> <input type="text" class="btn btn-default btn-lg changePswrd btn-block" value="Change Password"> </div></div><div class="form-group"> <label for="nationality" class="col-md-3 control-label custom-label">Nationality*</label> <div class="col-md-9"> <select class="form-control input-lg" id="nationality" name="nationality"> <option value="">Select Language</option> <option value="1">English (Australia)</option> <option value="2">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> </select> </div></div><div class="form-group"> <label for="opt-female" class="col-md-3 control-label custom-label gender-label">Gender*</label> <div class="col-md-5"> <div class="btn-group-justified selection-radio btn-md" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="sex" id="opt-female">Female</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="sex" id="opt-male">Male</label> </div></div><div class="col-md-4"> <select class="form-control input-lg"> <option value="">Other</option> <option value="1">LGBT</option> <option value="2">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> </select> </div><div class="col-md-9 col-md-offset-3"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-gender">Private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-gender">Public</label> </div></div></div><div class="form-group"> <label for="account" class="col-md-3 control-label custom-label">Account Type</label> <div class="col-md-9"> <select class="form-control input-lg" id="account" name="account"> <option value="">Select Account Type</option> <option value="1">Option</option> <option value="2">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> </select> </div></div><div class="form-group"> <div class="form-heading">heading section</div><label for="nextOfKin-fn" class="col-md-3 control-label custom-label">First Name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="nextOfKin-fn" placeholder="First Name"> </div></div><div class="form-group"> <label for="nextOfKin-ln" class="col-md-3 control-label custom-label">Last Name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="nextOfKin-ln" placeholder="Last Name"> </div></div><div class="form-group"> <label for="nextOfKin-phone" class="col-md-3 control-label custom-label">Contact Number</label> <div class="col-md-4"> <select class="form-control input-lg" id="nextOfKin-phone" name="nextOfKin-phone"> <option value="">Select One</option> <option value="1">Aus (+61)</option> <option value="2">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> </select> </div><div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="input-landline" placeholder="Number"> </div></div><div class="form-group"> <div class="form-heading">heading section</div><label for="educationLevel" class="col-md-3 control-label custom-label">Education Level</label> <div class="col-md-9"> <select class="form-control input-lg" id="educationLevel" name="educationLevel"> <option value="">Select Level</option> <option value="1">Tertiary</option> <option value="2">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> <option value="4">Option</option> </select> </div></div><div class="form-group"> <label for="institute" class="col-md-3 control-label custom-label">Institution Name</label> <div class="col-md-9"> <input type="text" class="form-control input-text input-lg" id="institute" placeholder="University"> </div></div><div class="form-group social"> <div class="form-heading">heading section</div><label for="instagram" class="col-md-3 control-label custom-label"> <span class="fa fa-instagram"></span> Instagram</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="instagram" placeholder="@instagramname"> </div><div class="col-md-4"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-instagram">Private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-instagram">Public</label> </div></div></div><div class="form-group social"> <label for="twitter" class="col-md-3 control-label custom-label"> <span class="fa fa-twitter"></span> Twitter</label> <div class="col-md-5"> <input type="text" class="form-control input-text input-lg" id="twitter" placeholder="@twittername"> </div><div class="col-md-4"> <div class="btn-group btn-group-justified selection-radio selection-radio" role="group" aria-label="Justified button group" data-toggle="buttons"> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-twitter">Private</label> <label class="btn btn-primary btn-lg"> <input type="radio" name="options-twitter">Public</label> </div></div></div><div class="row"> <div class="col-md-9 col-md-offset-3"> <div class="submit-block"> <button type="submit" class="btn btn-default btn-lg btn-block btn-publish">Submit</button> </div></div></div></form> </div>

关于html - 带有 Bootstrap 的自定义布局，表单缺乏响应能力，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37762396/

html - 带有 Bootstrap 的自定义布局，表单缺乏响应能力

示例 I:利用列的边栏

示例二:不使用列的固定位置侧边栏

上一篇：html - 如何将一个div设置为嵌套在另一个div中并填充父div并自动调整高度和重量

下一篇：html - 隐藏的 <ul> 在 <li> 之间悬停时消失