html - 带有 Bootstrap 的电子邮件和密码表格在一行中

Question

我最近才开始使用 bootstrap。我想在我的 Rails 应用程序的一行中创建电子邮件/密码验证:

电子邮件？ |密码？ |好的

现在，我有一个代码只适用于一行中的一封电子邮件和“确定”按钮:

电子邮件？ |好的

<div class="col-lg-12 text-center v-center">
...
  <form class="col-lg-12">
    <div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
      <input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email?">
      <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
    </div>
  </form>
</div>

和

.v-center {
  margin-top:7%;
}

我尝试在上面的代码中添加密码:

...
    <div class="input-group input-group-lg col-sm-offset-4 col-sm-4">
      <input type="text" class="center-block form-control input-lg" title="Enter your email." placeholder="email">
      <input type="text" class="center-block form-control input-lg" title="Enter your password." placeholder="password">
      <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="button">OK</button></span>
...

但它最终看起来像这样:

email?
          | OK
password?

缺少什么？

Answer 1

看起来 bootstrap 的 .center-block 里面有 display: block;。如果想让元素并排出现，它们一般需要在css中有inline或者inline-block的display(有其他一些方法，但这两种方法可以说是最常见/最简单的)。