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

工作示例代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

Bootstrap输入组宽度设置

1 个答案: