railsのformにboot strapを適用できない

Question

Ruby on Rails 5.0.0.1、bootstrap 4にて開発しています。

rails の form ヘルパーにbootstrapを適用したいのですが、うまくいきません。
お分かりの方、御指南頂けますと幸甚です。

こちらの記載ですと、inputが２列になってしまっています。これを横並びにしたいのですが、うまくいきません。（写真ご参照下さい）

<div class="form-group">
  <%= form.label :family_name, "氏名", :class => "col-xs-4 control-label" %>
  <div class="col-xs-8">
  <%= form.text_field :family_name, :class => "form-control" %> <%= form.text_field :given_name, :class => "form-control"%>
  </div>
</div>

一方、こちらの記載にすると、bootstrapが適用されず、rails単独のデフォルトフォームに戻ってしまいます（写真ご参照下さい）

<div class="form-group">
  <%= form.label :family_name, "氏名", :class => "col-xs-4 control-label" %>
  <%= form.text_field :family_name, :class => "form-control, col-xs-4" %> <%= form.text_field :given_name, :class => "form-control, col-xs-4"%>
</div>

＊参考にしたサイト
https://sites.google.com/site/rubyonrailsapps/view_tips/railsnoformwobootstrapde-shi-zhuangsurutoki

Comments

[退会済みユーザー]

同じコードに見えます。

Answer 1

Rubyは分からないのでhtmlで提示します。
このどちらかかなーと思います。
.form-inlineでは各inputのwidthはautoになるので適宜widthを指定してください。

<div class="form-group form-inline">
	<label class="control-label">氏名</label><input type="text" class="form-control"><input type="text" class="form-control">
</div>

<div class="row form-group">
	<div class="col-xs-4"><label class="control-label">氏名</label></div>
	<div class="col-xs-4"><input type="text" class="form-control"></div>
	<div class="col-xs-4"><input type="text" class="form-control"></div>
</div>

###追記
.form-horizontalでやるならこれでもいいですね。

<div class="form-horizontal" role="form">
	<div class="form-group">
		<label class="col-xs-4 control-label">氏名</label>
		<div class="col-xs-4">
			<input type="text" class="form-control">
		</div>
		<div class="col-xs-4">
			<input type="text" class="form-control">
		</div>
	</div>
</div>

Comments

[innjera]

いつも有難う御座います！うまくいきました！

Answer 2

form-inlineのクラスを付けてみました。
これでいけないでしょうか。

<div class="form-group form-inline">
    <%= label :family_name, "氏名", class: "col-xs-4 control-label" %>

  <%= text_field :family_name, "",  class: "form-control col-xs-4" %>
  <%= text_field :family_name, "",  class: "form-control col-xs-4" %>
</div>

ただ、自分も勉強中で、form.というのが何に紐付いているのかがわからなかったので削除しています。

Comments

[innjera]

手回っておらず、修正遅れてしまいました。申し訳ありません。form-inlineを入れたところ、横並びになりました！有難う御座います。

ちなみに、"form."ですが、これより上に以下のコードを書いております。この |form| に結びつけていました。

<%= form_for @user, url: :user_account do |form| %>

引き続き宜しくお願いいたします！