css - 无法在 Twitter Bootstrap 中格式化列和内容

Question

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

• 如果我有一个水平表单，里面有一个表单组，并且该表单组在同一行封装了一个标签、一个输入字段、一个按钮和一个切换开关，我该如何在我的媒体中定义它查询移动设备以便标签和输入字段保持在同一行并且按钮和切换开关换行在同一第二行？

目前在移动 View 中查看时，按钮和切换开关似乎漂浮在输入字段上方的右侧......我已经尝试定义内联表单，但我不想在我的表单中使用任何内联表单形式水平，仅形式组...

• 我也没有在我的长表单中指定部分，所以我有单独的 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;}

Answer 1

您使用的是 Bootstrap 3 吗？该文档很好地说明了网格系统:http://getbootstrap.com/css/#grid .为了利用 bootstrap 的网格，我用 .col-xs-12 类将每组元素包装在它们自己的 div 中的“xs”上。翻译过来，“嘿，当你在‘xs’世界的时候，占满整排。”然后另外，给它一个 .col-sm-6 类，这样一旦你达到 768px 宽，每个 div 将占据行的一半。