Question

我正在使用bootstrap 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太棒了！

但是，我只想在设备上使用此布局＆gt; = 768像素宽，即大于col-xs-12。在移动设备上我希望Button元素下拉到下一行 - 中心对齐。这是我现有的代码：

＆＃13;

<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>

＆＃13;

这允许我在设备上输入文本字段右侧的按钮＆gt; XS以及移动设备上的中心col-xs-12。

我可以做什么CSS魔术让这个输入文本字段成为一个输入组，它只对设备上的输入框进行分组＆gt;宽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>

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

2 个答案: