Bootstrapでcol-xs-xxxのときのみリンクが押せない

以下のようなコードを書きましたが、スマホサイズのときのみリンクが押せません。
ウインドウサイズを変更すると表示は変わるのですが、、

Bootstrap
1<div id="contents" class="contents">
2    <div class="container">
3		<div class="row">
4			<div class="col-xs-12">　・・・(1)
5				<div class="col-md-2 col-md-offset-3 col-xs-4 col-xs-offset-0">
6					<a href="#"><div class="btn btn-block btn-primary">AAA</div></a>
7				</div>
8				<div class="col-md-2 col-xs-4">
9					<a href="#"><div class="btn btn-block btn-primary">BBB</div></a>
10				</div>
11				<div class="col-md-2 col-xs-4">
12					<a href="#"><div class="btn btn-block btn-primary">CCC</div></a>
13				</div>
14				;
15			</div>
16			<div class="col-sm-12">　・・・(2)
17				<div style="border: 1px solid red;">
18					aaa
19				</div>
20			</div>
21		</div>
22	</div>
23</div>

PCやタブレットサイズでは押せるのに、
なぜスマホサイズのときのみリンクが押せないのかわからず困っています。
何かわかる方よろしくお願いいたします。

＊(2)を"col-xs-12"に変更するとリンクが押せるようになります。
また"col-sm-12"のままではborderも想定とは違う箇所に引かれてしまいます。

x_x

2018/09/03 06:34

提示コードだけでは再現しないようです。

sho.duck

2018/09/03 12:37

本当ですか！ということはこのコードのみであれば書き方は間違ってないのですね、、もう少し確認いたします。ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

Bootstrap 3 のグリッドシステムは実体はfloatのため、col-xs-の後ろにcol-xs-がないと重なってしまいます。
同じ親の中では最小デバイスをそろえるように(col-xs-に統一)するか、親をわけるようにしてください。clearfixが挿入され、重ならなくなります。
https://getbootstrap.com/docs/3.3/css/#grid

投稿2018/09/05 06:56

x_x

総合スコア13749