Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
bootstrapについて教えてください。
<body> <div class = "container"> <footer> <div class="row"> <div class="col-xs-offset-2 col-xs-6 test"><small>こんにちは</small></div> <div class="col-xs-1 abc"><img src="img1.png" alt="画像１です" width="64" height="64"></div> <div class="col-xs-1 def"><img src="img2.png" alt="画像２です" width="64" height="64"></div> </div> </footer> </div> </body>
下記のように計12になるようになっています。
| offset2 | xs-6 | img1 | img2 |
やりたい事。
img1、img2の画像が列の中で真ん中に表示されています。左右にマージン、パディングが設定されていると思うのですが、
左右のマージン、パディングを0にして、img1とimg2の表示されている感覚を狭めたいと思っています。
cssで設定しているのですが、表示がかわりません。何か解決する方法がありましたらよろしくお願いいたします。
.test .abc{margin:0;padding:0}
.test .def{margin:0;padding:0}
ちなみにブラウザの幅が狭い、スマホサイズだとマージン・パディングが０になっているように見えます。
ただし、ブラウザの幅を広げていくと、img1とimg2の間がどんどん開いていってしまいます。
大変失礼しました。初投稿なので、気がきなくて申し訳ありません。今後気をつけます！
ここは「質問への追記・修正、ベストアンサー選択の依頼」です。質問本文は編集することが可能なので、その依頼をしています。
失礼しました。修正しました。
回答2件
0
ベストアンサー
| offset2 | xs-6 | xs-1 | xs-1 | = 10
とりあえず指定されているものの合計は10です。
Bootstrap で xs-1 は row の長さの 1/12 くらいです。paddingが設定されているので厳密には違うのですが、ここで言いたいのは xs-1 は固定値ではないということです。
一方、画像は 64px の固定値としてコードの中に書かれています。そうなると、xs-1 が 64px以上あると隙間が生まれ、64px以下のときに xs-1 の要素からはみ出た上に隣と押し合うという結果になります。
なので、xs-1 の部分の比率が重要なら、
CSS
1.test1 .abc, 2.test1 .def { 3 padding: 0; 4} 5.test1 img { 6 width: 100%; 7}
HTML
1<div class="row test1"> 2 <div class="col-xs-offset-2 col-xs-6"><small>こんにちは</small></div> 3 <div class="col-xs-1 abc"><img src="img1.png" alt="画像１です"></div> 4 <div class="col-xs-1 def"><img src="img2.png" alt="画像２です"></div> 5</div>
画像が隣り合っていることを優先するなら、
CSS
1.test2 .abc { 2 padding: 0; 3} 4.test2 img { 5 display: block; 6 float: left; 7 max-width: 50%; 8}
HTML
1<div class="row test2"> 2 <div class="col-xs-offset-2 col-xs-6"><small>こんにちは</small></div> 3 <div class="col-xs-2 abc"> 4 <img src="img1.png" alt="画像１です"> 5 <img src="img2.png" alt="画像２です"> 6 </div> 7</div> 8```**動くサンプル：**[https://jsfiddle.net/gkuc9o3e/1/](https://jsfiddle.net/gkuc9o3e/1/) 9**動くサンプル（全画面版）：**[https://jsfiddle.net/gkuc9o3e/1/show/](https://jsfiddle.net/gkuc9o3e/1/show/)
投稿2017/05/11 16:54
総合スコア69407
ご回答ありがとうございます。お教え頂きました2番目の例で試してみました。見事に欲しかった結果が得られました。勉強になりました、ありがとうございます。
0
手元でBootstrapを読み込んで見てみると、親要素のdivにbox-sizing: border-box;が当たっているようなので、widthプロパティを変更しなければなりません。
css
1.test .abc, 2.test .def{ 3 width: ○○%; 4 margin:0; 5 padding:0; 6}
投稿2017/05/11 09:16
総合スコア81
ご回答ありがとうございます。width:を50％、200％など変更してみたのですが結果がかわりません。widthのところを、色々変更してみたのですが同じでした。
今気づいたのですが、質問に書かれているHTML構造だと、`.test .abc`というセレクタでは何も選択されませんね。
ここはお間違いないですか？
クラスtestの中のクラスabcを指定ということで、「.test .abc」と書いたのですが間違いでしょうか？ここに書かれているような構造は間違いないです。すいません、HTML、CSS初めて４週間なのでよくわかっていません(汗)
`.test .abc`が.testの中の.abc、というのはその通りなのですが、質問のHTMLをみると、.abcは.testの中にないように見えます。
あなたの回答
tips
プレビュー
