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

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

文字を折り返さない

<p class="text-nowrap">ここの文字は折り返されない</p>

<%= f.label :kana, "フリガナ", :class => "col-sm-3 control-label text-nowrap" %>

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

&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;

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

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

スマホ => 100%

といった感じになる。

ちなみに、

&lt;div class=”container-fluid”&gt;

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

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

2015年06月28日 WORDPRESS

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

Bootstrap3日本語リファレンス

http://bootstrap3.cyberlab.info/

(2)次に

&lt;div class=”container”&gt;&lt;/div&gt;の中で、
&lt;div class=”row”&gt;&lt;/div&gt;

さらに、その中で、

&lt;div class=&quot;col-sm-4 bg-info&quot;&gt;テキスト1&lt;/div&gt;

のように記載する。

	&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;

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のところに隠れてしまう。

&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;...

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

関連記事
Count per Day
    Popular Posts
    スポンサーリンク

    シェアする

    • このエントリーをはてなブックマークに追加

    フォローする