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="画像1です" width="64" height="64"></div> <div class="col-xs-1 def"><img src="img2.png" alt="画像2です" 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}
ちなみにブラウザの幅が狭い、スマホサイズだとマージン・パディングが0になっているように見えます。
ただし、ブラウザの幅を広げていくと、img1とimg2の間がどんどん開いていってしまいます。
回答2件
あなたの回答
tips
プレビュー