如何僅在平板電腦大小及以上的設備上建立引導輸入組？

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>