質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1326閲覧

【bootstrap】レスポンシブデザイン(流動性のあるグリッド)

fearless0603

総合スコア41

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/07/26 05:58

編集2016/07/26 06:31

Bootstrap v2.3.0を使用しています。
基本的なことですが、

html

1コード 2 3<div class="container-fluid"> 4 <div id="header"> 5 ヘッダー 6 </div> 7 <div class="row-fluid"> 8 <div class="span4" style="background-color: red;">サイドバー</div> 9 <div class="span4" style="background-color: yellow;">メイン</div> 10 <div class="span4" style="background-color: yellow;">メイン1</div> 11 <div class="span4" style="background-color: yellow;">メイン2</div> 12 <div class="span4" style="background-color: yellow;">メイン3</div> 13 <div class="span4" style="background-color: yellow;">メイン4</div> 14 </div> 15 <div id="footer"> 16 フッター 17 </div> 18</div>

と書いたときに、うまく3列にならないのですが、
row-fluidの中身は合計で12以内に収まるようにspanを設定しなければならないのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

デフォルトでは12分割前提なので、合計12になるようにspan設定をしないといけませんね。
bootstrap 3以降ならsassの設定で簡単に24分割に変更したりもできますが、
お使いのものはbootstrap2のようですので、具体的にどのようにして24分割に変更するのかは
ちょっと分かりかねます。

別に24分割にしたいわけではなく、単に3列表示にしたいだけなら、spanの合計が12になるように
コードを書いてください。

投稿2016/07/26 07:52

編集2016/07/26 07:53
aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問