0
非常に長いコードは残念です。 81個のボタンがグリッドに配置されています。私が直面している問題は、左側のボタンがモバイル版のいくつかの拡張機能に「食べられている」ということです。その理由を見つけることができません。応答性の高いブートストラップグリッド、ボタンがオーバーライドされています
をそして2つ目の質問です：画像をご参照ください。ボタンのグループの間にスペースがあるのはなぜですか？私は常にパッディングとマージンが0pxに設定されていることを確認しました！列がコンテンツよりも小さいので、私は
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4 col-xs-4" style="padding:0px !important;">
<div class="row" style="margin:0px !important;"></div>
\t <div class="col-md-12 col-xs-12">
<div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t <div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t
\t \t <div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t
</div>
\t
</div>
<div class="col-md-4 col-xs-4" style="padding:0px !important;">
<div class="row" style="margin:0px !important;"></div>
\t <div class="col-md-12 col-xs-12">
<div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t <div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t
\t \t <div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t
</div>
\t
</div>
<div class="col-md-4 col-xs-4" style="padding:0px !important;">
<div class="row" style="margin:0px !important;"></div>
\t <div class="col-md-12 col-xs-12">
<div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t <div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t
\t \t <div class="row" style="margin:0px !important;">
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0px !important;">
<button class="btn btn-default btn-block" type="button"></button>
</div>
</div>
\t \t
\t \t
</div>
\t
</div>
ありがとうございます。それでは、ブートストラップボタンでコンテンツを調整する方法はありますか？ –
私は、あなたは単により多くのスペースが必要だと思います。小さなボタンを得るためにbtn-smやbtn-xsクラスを試すことができます。 – Shadowfox
おそらく、最小の列を少し大きめにし、最大のものを少し小さくしますか？ – Shadowfox