Question

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

如果我的内部有一个表格组的水平表格，并且该表格组合在同一行上封装了标签，输入字段，按钮和切换开关，我该如何在我的媒体中定义它查询移动设备，以便标签和输入字段保持在同一行，按钮和切换开关包裹在同一行上？

在移动视图中查看时，按钮和切换开关看起来像是浮动到输入字段上方的正确类型...我已经尝试定义了form-inline，但我不希望我的任何表单内联形式水平，只有形式组......

我还没有用长格式指定部分，所以我有单独的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的网格，我将每个元素组合在一起，以便在＃34; xs＆＃34;在他们自己的div中有一类.col-xs-12。翻译，＆＃34;嘿，当你进入＆＃34; xs＆＃34;世界，占据整排。＆＃34;另外，给它一个.col-sm-6类，这样一旦你达到768px宽，每个div将占据行的一半。

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

1 个答案: