スポンサーリンク

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

(参考)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"]
&lt;!DOCTYPE html&gt;

&lt;head&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;

&lt;/div&gt;
&lt;/body&gt;
[/sourcecode]

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

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

スマホ => 100%

といった感じになる。

ちなみに、

[sourcecode language="ruby" padlinenumbers="true"]
&lt;div class=”container-fluid”&gt;
[/sourcecode]

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

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

2015年06月28日 WORDPRESS

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

Bootstrap3日本語リファレンス

http://bootstrap3.cyberlab.info/

 

(2)次に

[sourcecode language="ruby"]
&lt;div class=”container”&gt;&lt;/div&gt;の中で、
&lt;div class=”row”&gt;&lt;/div&gt;
[/sourcecode]

さらに、その中で、

[sourcecode language="ruby"]
&lt;div class=&quot;col-sm-4 bg-info&quot;&gt;テキスト1&lt;/div&gt;
[/sourcecode]

のように記載する。

[sourcecode language="ruby"]
&lt;body&gt;
&lt;div class=&quot;container&quot;&gt;

&lt;div class=&quot;row&quot;&gt;

&lt;div class=&quot;col-sm-4 bg-info&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;%= f.label :ID, &quot;ID&quot;, :class =&gt; &quot;col-sm-3 control-label&quot; %&gt;
&lt;div class=&quot;col-sm-9&quot;&gt;
&lt;%= f.number_field :ID, :class =&gt; &quot;form-control&quot; %&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4 bg-warning&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;%= f.label :name, &quot;氏名&quot;, :class =&gt; &quot;col-sm-3 control-label&quot; %&gt;
&lt;div class=&quot;col-sm-9&quot;&gt;
&lt;%= f.text_field :name, :class =&gt; &quot;form-control&quot; %&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;col-sm-4 bg-danger&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;%= f.label :kana, &quot;フリガナ&quot;, :class =&gt; &quot;col-sm-3 control-label text-nowrap&quot; %&gt;
&lt;div class=&quot;col-sm-9&quot;&gt;
&lt;%= f.text_field :kana, :class =&gt; &quot;form-control&quot; %&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;
[/sourcecode]

 

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

image

 

Railsだと、以下のように表示される。

(PCの画面)

image

 

(スマホの画面)

image

 

●Navbarを画面の上に固定したいとき

以下のように、

<nav class = “navbar navbar-fixed-top>

と指定し、その下に続くcontainerを、

<div class=”container” style=”padding: 60px 20 0 0” >

のように指定する必要がある。このpaddingを入れないと、containerの中身がnavbarのところに隠れてしまう。

 

[sourcecode language="ruby"]
&lt;body&gt;
&lt;nav class=&quot;navbar navbar-inverse navbar-fixed-top&quot;&gt;
&lt;div class=&quot;navbar-brand&quot;&gt;ナビゲーションバー&lt;/div&gt;
&lt;/nav&gt;

&lt;div class=&quot;container&quot; style=&quot;padding:60px 0 0 0&quot;&gt;

&lt;div class=&quot;row&quot;&gt;

&lt;div class=&quot;col-sm-4 bg-info&quot;&gt;…
[/sourcecode]

image

(実際の画面)(html)

image

(参考)

Bootstrap3.x.で何かやるときの最低限のメモ

zaburoが2015/05/06にKobitoから投稿(2015/08/02に編集)

http://qiita.com/zaburo/items/e5b8c51873b193bb1573#navbar%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC

スポンサーリンク