rails4でbootstrap3でPCで3段組み、スマホで1段組み

2016年6月25日

（参考）Bootstrap移行ガイド
http://cccabinet.jpn.org/bootstrap3/

文字を折り返さない

[sourcecode language=”ruby” padlinenumbers=”true”]
<p class="text-nowrap">ここの文字は折り返されない</p>

<%= f.label :kana, "ﾌﾘｶﾞﾅ", :class => "col-sm-3 control-label text-nowrap" %>
[/sourcecode]

(1) <body></body>内で、<div class=”container”>

[sourcecode language=”ruby”]
<!DOCTYPE html>

</div>
</body>
[/sourcecode]

よくある記載だが、これにより、 containerの中身が、

デスクトップパソコン => 970px

スマホ => 100%

といった感じになる。

ちなみに、

[sourcecode language=”ruby” padlinenumbers=”true”]
<div class=”container-fluid”>
[/sourcecode]

にすると、常に横幅100%になる。

（参考）Bootstrap3.3.5のグリッドシステムの使い方

2015年06月28日 WORDPRESS

http://wordpresscollege.org/bootstrap/bootstrap3-gridsystem/

Bootstrap3日本語リファレンス

http://bootstrap3.cyberlab.info/

(2）次に

[sourcecode language=”ruby”]
<div class=”container”></div>の中で、
<div class=”row”></div>
[/sourcecode]

さらに、その中で、

[sourcecode language=”ruby”]
<div class="col-sm-4 bg-info">テキスト1</div>
[/sourcecode]

のように記載する。

[sourcecode language=”ruby”]
<body>
<div class="container">

<div class="col-sm-4 bg-info">
<div class="form-group">
<%= f.label :ID, "ID", :class => "col-sm-3 control-label" %>
<div class="col-sm-9">
<%= f.number_field :ID, :class => "form-control" %>
</div>
</div>
</div>

<div class="col-sm-4 bg-warning">
<div class="form-group">
<%= f.label :name, "氏名", :class => "col-sm-3 control-label" %>
<div class="col-sm-9">
<%= f.text_field :name, :class => "form-control" %>
</div>
</div>
</div>

<div class="col-sm-4 bg-danger">
<div class="form-group">
<%= f.label :kana, "ﾌﾘｶﾞﾅ", :class => "col-sm-3 control-label text-nowrap" %>
<div class="col-sm-9">
<%= f.text_field :kana, :class => "form-control" %>
</div>
</div>
</div>

</div>

</body>
[/sourcecode]

htmlのみだと、以下のようになる。