无法格式化Twitter Bootstrap中的列和内容

我很难理解类中定义的不同列宽属性，以及下面的其他一些问题。

• 如果我有一个水平窗体，里面有一个窗体组，并且该窗体组在同一行上封装了标签，输入字段，按钮和切换开关，那么如何在移动设备的媒体查询中定义它们以便标签和输入字段保持在同一行上，而按钮和拨动开关包裹在同一行上？

目前在移动视图中查看时，按钮和切换开关似乎浮动到了输入字段上方的右侧...我已经尝试定义表格内联，但是我不希望在我的表格内使用任何表格内联，仅表单组...

• 我也没有在我的长格式中指定节，所以我有单独的div标头来表示表单的每个节，那么使用表单看起来不错吗？

• 我的选择下拉列表也有问题。当我指定它们的宽度为100％时，它们不跨越其列宽的宽度，我可以指定的唯一方法是为它们提供固定的宽度，但是它们却不会响应...。

有任何想法吗？

谢谢

<div class="form-horizontal" role="form" action="#" method="post">
<div class="form-group">
  <label for="fname" class="col-md-2 control-label custom-label">First name</label>
  <div class="col-md-8">
    <input type="text" class="form-control input-text" id="inputfname" placeholder="" focus>
        </div>
    </div>

<div class="form-group">
    <label for="lname" class="col-md-2 control-label custom-label">Last name</label>
<div class="col-md-8">
<input type="text" class="form-control input-text" id="inputlname" placeholder="">
    </div>
</div>

<div class="form-group">
  <label for="gender" class="col-md-2 control-label custom-label">Gender</label>
  <div class="col-md-2">
    <div class="toggle-input-btn-two">
      <div class="slider-two"></div>
        <span class="male">Male</span>
          <span class="female selected">Female</span>
      </div>
    </div>

    <div class="btn-group col-md-5"> 
        <a class="btn btn-default dropdown-toggle btn-select gender"
           data-toggle="dropdown" href="#">Other <span class="caret"></span>
        </a>
        <ul class="dropdown-menu inline">
            <li><a href="#">gender</a></li>
            <li><a href="#">gender</a></li>
            <!-- <li class="divider"></li>
            <li><a href="#">
            <span class="glyphicon glyphicon-star"></span> Other</a></li> -->
        </ul>
    </div>

    <div class="col-md-2">
        <div class="toggle-input-btn-three">
            <div class="slider-three"></div>
                <span class="private3">Private</span>
                <span class="public3 selected">Public</span>
            </div>
        </div>
    </div>

    <div class="headers">
        <h3>Next Section</h3>
    </div>

的CSS

.form-horizontal .form-group{ padding: 0 15px;}
.form-horizontal .form-group .custom-label{ text-align: left; padding-left: 0; margin-top: -10px; font-size: 1.7em; font-weight: normal; color: #fff;}
.form-horizontal .form-group .form-control { background-color: #4d4d4d; border-color: #4d4d4d; color: #fff; padding: 0px 10px;  border-radius: 3px;}
.form-horizontal .form-group .input-text { font-size: 1.3em; color: #fff;}
.form-horizontal .form-group .form-control:focus { border-color: #f47929; }

/* DROPDOWN MENU STYLING */
.btn-group .btn-default { color: #fff; background-color: #4d4d4d; border: none; font-size: 1.2em; border-radius: 3px;}
.btn-group .dropdown-toggle {position: relative; overflow: hidden; padding-right: 24px /* Optional for caret */; text-align: left; text-overflow: ellipsis; }
.btn-group ul.dropdown-menu {width: 96%; margin-left: 15px; }

.btn-group .dropdown-toggle.gender {position:relative; width: 567px; margin-left: 10px; }
.btn-group .dropdown-toggle.account {position:relative; width: 780px; }

.btn-group ul.dropdown-menu.inline { width: 567px; margin-left: 25px;}

/* OPTIONAL FOR DROPDOWN CARET */
.dropdown-toggle .caret { position: absolute; right: 12px; top: calc(50% - 2px);}



 .toggle-input-btn-two {
    width: 200px; 
    height: 38px; 
    position: absolute; 
    display: inline-block; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
    color: #FFF; 
    background-color: #F47929; 
    border: 2px solid #FCD7BC;
    border-radius: 3px; 
    line-height: 34px; 
    font-family: 'Lato', verdana, sans-serif; font-size: 1.3em; 
/*  -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); 
 */ cursor: pointer;
}

.toggle-input-btn-three {
    width: 200px; 
    height: 38px; 
    left: 60%;
    position: absolute; 
    display: inline-block; 
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
    color: #FFF; 
    background-color: #F47929; 
    border: 2px solid #FCD7BC;
    border-radius: 3px; 
    line-height: 34px; 
    font-family: 'Lato', verdana, sans-serif; font-size: 1.3em; 
/*  -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2); 
 */ cursor: pointer;
}

    .toggle-input-btn span,
.toggle-input-btn-two span,
.toggle-input-btn-three span,
.toggle-input-btn-four span,
.toggle-input-btn-five span,
.toggle-input-btn-six span,
.toggle-input-btn-seven span
 { width: 50%; height: 100%; float: left; text-align: center; cursor: pointer; -webkit-user-select: none;}

.toggle-input-btn-two div,
.toggle-input-btn-three div { width: 100px; height: 80%; top: 50%; left: 2%; transform: translateY(-50%); position: absolute; background-color: #FFF; border-radius: 3px;}

.toggle-input-btn-three div { border: 2px solid #aaa;}
.toggle-input-btn-two div {border: 2px solid #b3b3b3;}