javascript - Bootstrap 输入组宽度设置

Question

我开始接触 CSS、JS 和 HTML 的魔法。

现在我有这样的构造:

....
<div class="signup row_centered sr_simple" data-spy="affix" data-offset-top="300">
    <form class="form-inline" role="form" id="signup">
        <div class="form-group">
            <div class="input-group" id="signup_inputs">
                <input type="email" class="form-control input-lg" name="EMAIL" id="signup_email" placeholder="Enter email address...">
                <span class="input-group-btn">
                    <button class="btn btn-default fade_signup input-lg btn-warning" type="submit" id="signup_button">Get Early Access!</button>
                </span>
            </div>
        </div>
    </form>
</div>
...

而且我希望内联表单组居中，但具有特定的宽度。设置 col-xx-yy 没有任何效果。所以指定整个表单宽度的唯一方法是这个(我猜)hack:

@media (min-width : 768px) {
 #signup_email {
   width : 450px;
 }
}

@media (max-width : 767px) {
  #signup_inputs {
    width        : auto;
    margin-left  : 5%;
    margin-right : 5%;
  }
}

对于不同的宽度，如何正确设置输入表单的宽度？或者我的做法是否正确？

Answer 1

似乎没有任何理由需要 form-inline(您只有一个没有标签的输入)。删除它并使用您准备好的规则以及一个简单的 margin: auto，您应该会很好。

注意:对于输入组中不同大小的输入，请使用 Input-Group-Sizing

工作示例片段。

@media (min-width: 768px) {
  .signup {
    width: 450px;
    margin: auto;
  }
}
@media (max-width: 767px) {
  .signup {
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="signup">
  <form role="form">
    <div class="form-group">
      <div class="input-group input-group-lg">
        <input type="email" class="form-control" name="email" placeholder="Enter email address...">
        <span class="input-group-btn">
          <button class="btn btn-warning" type="submit">Get Early Access!</button>
        </span>
      </div>
    </div>
  </form>
</div>