Rails 和 Bootstrap 3：如何在同一行获取名字和姓氏？答案

【问题标题】：Rails and Bootstrap 3: How to get first and last name on same line?Rails 和 Bootstrap 3：如何在同一行获取名字和姓氏？
【发布时间】：2016-05-31 15:09:11
【问题描述】：

我无法在同一行获取名字和姓氏字段，并且宽度是其他行的一半 - 电子邮件、密码等。

我尝试了各种更改，包括添加“form-horizonal”、col-xs-6，但没有解决。

我想让这口井看起来像这样（目前所有井的大小都相同，堆叠在一起）：

index.html.erb 的摘录：

<form class="form-signin col-sm-4 well" role="form">
          <h2 class="form-signin-heading">Sign Up</h2><hr>

          <form class="form-inline" role="form">

            <form class="form-horizontal">
            <div class="form-group col-xs-6">
              <label class="sr-only" for="#">First name</label>
              <input type="text" class="form-control" id="#" placeholder="First name">
            </div>
            </form>

            <form class="form-horizontal">
            <div class="form-group col-xs-6">
              <label class="sr-only" for="#">Last name</label>
              <input type="text" class="form-control" id="#" placeholder="Last name">
            </div>
            </form>


            <div class="form-group">
              <input type="email" class="form-control" placeholder="Email address">
            </div>

            <div class="form-group">
              <input type="email" class="form-control" placeholder="Type email again">
            </div>

            <div class="form-group">
              <input type="password" class="form-control" placeholder="Password">
            </div>

             <div class="form-group">
                <div class="">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"> Remember me
                    </label>
                  </div>
                </div>
              </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
          </form>
        </form>

非常感谢所有帮助。

完整的 index.html.erb -
https://gist.github.com/attatae/11022245

Bootstrap 3 网格概述（是的，我也看过）：
http://getbootstrap.com/css/#grid

我查看的另一个相关问题，但没有解决：
Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?

【问题讨论】：

在您想要的图片中，没有名字和姓氏的标签。你想让你的也没有标签吗？
@lennon625，如果你引用<%= f.label :first_name %>之类的东西，那么除了占位符之外什么都没有就可以了。我只需要占位符让人们知道在哪里放置名称等。
对。我现在正在做一个小提琴，但对于初学者来说，删除这两个输入的标签（First Name: ），否则它不会按照你想要的方式排列。之后，只需给名字和姓氏输入一个 id，以便它们可以用 CSS 定位，并将它们浮动到左侧。我会马上给你一个小提琴，让你知道该怎么做。

标签： html ruby-on-rails twitter-bootstrap-3

【解决方案1】：

Here is what I came up with

我赶紧补充说，解决方案可能会有所不同，因为它是引导程序。我的解决方案根本没有考虑到这一点，因为我不熟悉它。这可能就像更改某些类一样简单。祝你好运...

【讨论】：