Rails и Bootstrap 3: Как получить имя и фамилию на одной строке?

0

Я не смог получить поля First и Last Name в одной строке и половину ширины других строк - адрес электронной почты, пароль и т.д.

Я пробовал различные изменения, включая добавление "form-horizonal", col-xs-6, но не решил его.

Я хотел бы сделать так, чтобы хорошо выглядело (в настоящее время все одинаковые размеры, уложенные друг на друга):

Изображение 174551

Выдержка 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: Как получить два входных сигнала на одной линии и другие входы на отдельных линиях?

  • 0
    На картинке, как бы вы хотели, чтобы она выглядела, нет меток для имени и фамилии. Хотите, чтобы у вас тоже не было ярлыков?
  • 0
    @ lennon625, если вы ссылаетесь на что-то вроде <%= f.label :first_name %> , тогда ничего, кроме заполнителя, не будет. Мне нужно только заполнитель, чтобы люди знали, где поставить имя и тому подобное.
Показать ещё 1 комментарий
Теги:
twitter-bootstrap-3

1 ответ

0

Вот что я придумал

Я спешу добавить, что решение может отличаться из-за того, что он загружается. Мое решение не учитывает это вообще, потому что я не знаком с ним. Это может быть так же легко, как изменение некоторых классов. Удачи тебе...

Ещё вопросы

Сообщество Overcoder
Наверх
Меню