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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

4897閲覧

bootstrapのグリッドシステムの値の入っていない枠について

Mkato

総合スコア118

Bootstrap

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

HTML

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

CSS

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

0グッド

0クリップ

投稿2016/02/20 12:58

###前提・実現したいこと
bootstrapのグリッドシステムを用いてレイアウトを表示を整えたい。

###発生している問題・エラーメッセージ
グリットシステムを利用してサイト制作しているのですが、値が入っていない枠の表示が崩れてしまいます。

こんな感じです。
bootstrap

###ソース

<div class="container"> <div class="row"> <div class="col-lg-12"> <h1>購入商品</h1> <div class="col-md-4">商品名</div> <div class="col-md-8">222</div> <div class="col-md-4">商品URL</div> <div class="col-md-8">222</div> <div class="col-md-4">商品ナンバー</div> <div class="col-md-8">222</div> <div class="col-md-4">個数</div> <div class="col-md-8">222</div> <div class="col-md-4">色</div> <div class="col-md-8">222</div> <div class="col-md-4">サイズ</div> <div class="col-md-8">222</div> <div class="col-md-4">メモ</div> <div class="col-md-8">222</div> <!-- 何も値が入っていない --> <div class="col-md-4">商品名</div> <div class="col-md-8"></div> <div class="col-md-4">商品URL</div> <div class="col-md-8"></div> <div class="col-md-4">商品ナンバー</div> <div class="col-md-8"></div> <div class="col-md-4">個数</div> <div class="col-md-8"></div> <div class="col-md-4">色</div> <div class="col-md-8"></div> <div class="col-md-4">サイズ</div> <div class="col-md-8"></div> <div class="col-md-4">メモ</div> <div class="col-md-8"></div> </div> </div> </div>

CSSは何も設定変更していないbootstrapを利用しています。

どの様にすると値が入っていない枠もそのまま表示する事が出来ますでしょうか。

宜しくお願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

どの様にすると値が入っていない枠もそのまま表示する事が出来ますでしょうか。

3列目の「商品ナンバー、個数、...」を左側に寄せたいということでしょうか?
「値が入っていないとなぜずれるか」は分かりませんが、Bootstrapの使い方が間違っているからずれてしまっているんだと思います。

Bootstrapのグリッドシステムでは、行単位(改行させたい単位)で、.rowを付与する必要があります。
http://bootstrap3.cyberlab.info/css/gridSystem-sample7.html

html

1 <div class="row"> 2 <div class="col-md-4">商品名</div> 3 <div class="col-md-8">222</div> 4 </div> 5 <div class="row"> 6 <div class="col-md-4">商品URL</div> 7 <div class="col-md-8">222</div> 8 </div> 9 ...

投稿2016/02/20 13:58

yuji38kwmt

総合スコア437

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

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

Mkato

2016/02/20 14:31

ご回答有難う御座います。 ご説明不足で申し訳御座いません。左に寄せたいと考えております。 「値が入っていないとなぜずれるか」といいますのは以下の様な感じです。 値が入っている場合 この場合の値とは"222"の事です。 ``` <div class="col-md-4">商品名</div> <div class="col-md-8">222</div> ``` 値が入っていないとは以下です。 "222"が入っていない状態。 ``` <div class="col-md-4">商品名</div> <div class="col-md-8"></div> ``` 頂いた方法を試してみて解決しました。 ``` <div class="row"> <div class="col-md-4">商品名</div> <div class="col-md-8"></div> </div> ``` 今までrowの意味を分からず使っておりました。。。12枠(4+8)になると勝手に改行するのかなーと考えておりました。。。 本当に有難う御座います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問