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

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

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

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

Q&A

解決済

1回答

351閲覧

bootstrapで複数のブレイクポイントとオフセットを設定した際の挙動について教えてください

sho.duck

総合スコア17

Bootstrap

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

0グッド

0クリップ

投稿2018/07/17 14:28

例えば、スマホサイズでは2行で、PCサイズでは1行では表示させたい場合、
スマホサイズでのみ空白を入れて調整したいのですが、
PCサイズでも空白が入ってしまいます。

bootstrap3

1<div id="contents" class="contents"> 2 <div class="container"> 3 <div class="row"> 4 <div class="col-md-2 col-xs-2 col-xs-offset-1"> 5 aaaaa 6 </div> 7 <div class="col-md-2 col-xs-2 col-xs-offset-1"> 8 bbbbb 9 </div> 10 <div class="col-md-8 col-xs-12"> 11 ccccc 12 </div> 13 </div> 14 </div> 15</div>

col-md-xxはmdのみ、col-xs-xxはxsのみで構成するものかと思ったのですが、
どうなのでしょうか。
col-mdに空白を入れないようにするにはどう記述すればよいのでしょうか。

bootstrap、複数、ブレイクポイント、オフセット 等をキーワードにして調べているのですが、対処方法がわからず行き詰まっています。
どうぞよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

上位のレイアウトでoffsetを適用しない場合には
col-xx-offset-0
を指定します。

今回の場合だとcol-md-offset-0ですね。

投稿2018/07/18 01:04

macaron_xxx

総合スコア3191

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

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

macaron_xxx

2018/07/18 01:09

ちなみに、[公式](https://getbootstrap.com/docs/3.3/css/)の「Offsetting columns」項に 「You can also override offsets from lower grid tiers with .col-*-offset-0 classes.」とありますよ。 これらは一読しておくことをおすすめします。
sho.duck

2018/07/18 03:05

ありがとうございます!! おかげで思い通りの表示ができました。 参考ページもありがとうございました。該当箇所の記載も見つけました。 また参照できるようブックマークしておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問