如何仅在平板电脑大小及以上的设备上建立引导输入组？

Question

我正在使用引导程序3，并希望拥有以下内容。

平板电脑大小及以上的设备：

|    Input-text-area | button flush against the right edge of the text area    |

移动设备：

|        Input-text-area        |
|           button here         |

这很容易-使用此方法： http : //getbootstrap.com/components/#input-groups-buttons太好了！

但是，我只希望在宽度大于等于768像素的设备（即大于col-xs-12的设备）上使用此布局。 在移动设备上时，我希望Button元素下降到下一行-居中对齐。 这是我现有的代码：

 <form id="signup-form" class="new_invitation" action="/invitations" accept-charset="UTF-8" method="post"> <div style="margin-bottom:0px;" class="col-sm-4 col-sm-offset-3 input-position"> <input class="form-control full-width cinput" placeholder="Enter email address... " id="InputEmail" type="text" name="invitation[recipient_email]"> </div> <div class="col-xs-12 col-sm-2 input-position fixit" style="margin-bottom:0px;"> <input type="submit" name="commit" value="JOIN IN" class="btn btn-default position-mobile cbigbtn" id="gabetabtn"> </div> </form> 

这使我可以将按钮放在设备> XS上的输入文本字段的右侧，并在移动设备上位于其自己居中的col-xs-12上。

要使此输入文本字段成为输入组，只有组会刷新到宽度大于768像素的设备上的输入框，我该怎么做？

Answer 1

我会尝试这样的方法，嵌套引导程序列：

 <div class="row"> <div class="col-lg-12"> <div class="input-group"> <div class="col-xs-12 col-sm-9" style="padding:0px;"> <input class="form-control full-width cinput" placeholder="Enter email address... " id="InputEmail" type="text" name="invitation[recipient_email]"> </div> <div class="col-xs-12 col-sm-3" style="padding:0px;"> <span class="input-group-btn" style="margin:0 auto;"> <input type="submit" name="commit" value="JOIN IN" class="btn btn-default position-mobile cbigbtn" id="gabetabtn" style="width:100%;"> </span> </div> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> 

您的另一个选择是查看媒体查询并将其添加到CSS文档中。

http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

这些都是您需要更改以实现所需行为的所有规则，因此按钮和输入在768px以下保持对齐。

 body { padding-top: 50px; } @media (max-width: 767px) { .new_invitation .input-group .form-control, .new_invitation .input-group-btn { display: block; border-radius: 4px; width: 100%; } .new_invitation .input-group-btn .btn { display: block; border-radius: 4px; width: 100%; margin-top: 40px; } .new_invitation .input-group-btn > .btn + .btn { margin-left: 0px; } .new_invitation .input-group-btn:first-child > .btn { margin-right: 0px; } .new_invitation .input-group-btn:last-child > .btn { margin-left: 0px; } .new_invitation .input-group { width: 100%; } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-sm-12"> <form id="signup-form" class="new_invitation" action="/invitations" accept-charset="UTF-8" method="post"> <div class="input-group"> <input class="form-control full-width cinput" placeholder="Enter email address..." id="InputEmail" type="text" name="invitation[recipient_email]"> <span class="input-group-btn"> <input type="submit" name="commit" value="JOIN IN" class="btn btn-default position-mobile cbigbtn" id="gabetabtn"> </span> </div> </form> </div> </div> </div>