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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

CSS

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

Q&A

解決済

2回答

545閲覧

bootstrapで3カラム→1カラムのデザインにしたい

chocolatehouse

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Bootstrap

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

CSS

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

0グッド

0クリップ

投稿2018/08/16 14:32

編集2018/08/16 14:33

前提・実現したいこと

bootstrapを用いたレスポンシブのLPを製作中です。
992px以下でで3カラム→1カラムといったレイアウトにしたいと思っています。

発生している問題・エラーメッセージ

992pxまで3カラム
991〜716pxまで上段に2カラム、下段に1カラム
715px以下で1カラム

991〜716pxの2−1となる部分も1カラムで表示したく思います。

該当のソースコード

html

1<div class="reviews container"> 2 <h2>タイトル</h2> 3 <div class="reviews_container row"> 4 <div class="review review_1 col-md-4"> 5 <!-- 内容--> 6 </div> 7 <div class="review review_2 col-md-4"> 8 <!-- 内容--> 9 </div> 10 <div class="review review_3 col-md-4"> 11  <!-- 内容--> 12 </div> 13 </div> 14 </div>

CSS

1.reviews{ 2 width:100%; 3 height:1120px; 4 background-color: #F2F2F2; 5 position: relative; 6 overflow: hidden; 7} 8 9.reviews_container{ 10 width:1020px; 11 text-align: center; 12 margin: 0 auto; 13} 14 15.review{ 16 width: 320px; 17 height: 800px; 18 background-color: #fff; 19 display: inline-block; 20 padding: 30px 30px 50px; 21 margin: 10px; 22 border: solid 1px #CCCCCC; 23 position: relative; 24 box-shadow: 1px 1px 10px rgba(0,0,0,0.1); 25 vertical-align: middle; 26} 27 28@media screen and (max-width: 992px){ 29 .reviews_container{ 30 width: 100%; 31 } 32 33 .reviews{ 34 height: 2671px; 35 } 36}

試したこと

col-4をsm,lgでも試しました。

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

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

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

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

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

guest

回答2

0

書かなくてもできるような気がしていますが、下記はいかがですか?

<div class="review review_1 col-md-4 col-sm-12">

投稿2018/08/16 15:16

drunkdoll

総合スコア128

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

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

macaron_xxx

2018/08/20 02:15

992pxでわけるのはcol-lg-*です。
drunkdoll

2018/08/20 08:52

4はそうですね。3を使うことが多かったので、主観で書いてしまいましたね
macaron_xxx

2018/08/20 09:17

なるほど。言われて気付きました。 確かに3だとmdですね。 失礼いたしました。 質問者がmdと書いている以上、3なのでしょうか。 バージョン表記は必須ですね。
drunkdoll

2018/08/20 09:23

いえいえ。おっしゃる通り、バージョンの記載は必須ですね。
chocolatehouse

2018/08/22 10:51

ご回答ありがとうございました。 バージョンの記載が抜けており申し訳ありません。今回使用したバージョンは3になります。
guest

0

ベストアンサー

Bootstrapを使用する場合、レイアウトと装飾はわけることをお薦めします。
marginやpaddingを設定するなどで、Bootstrap本来のレイアウトを損ねる恐れがあります。

992pxでわけるのはcol-lg-*です。

その上で、ご希望のレイアウトは下記になります。

html

1<div class="reviews container"> 2 <h2>タイトル</h2> 3 <div class="reviews_container row"> 4 <div class="col-lg-4"> 5 <div class="review review_1"> 6 <!-- 内容--> 7 </div> 8 </div> 9 <div class="col-lg-4"> 10 <div class="review review_2"> 11 <!-- 内容--> 12 </div> 13 </div> 14 <div class="col-lg-4"> 15 <div class="review review_3 "> 16 <!-- 内容--> 17 </div> 18 </div> 19 </div> 20</div>

ただし、.reviewclassmarginwidthの両方が指定されているため、予期せぬレイアウトになっています。
Bootstrapには標準で左右15pxpaddingが含まれていますので、そのあたりを考慮した上でスタイルを再度見直すことをおすすめします。

投稿2018/08/20 02:15

macaron_xxx

総合スコア3191

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問