コラムのブートストラップボタンはコンピュータで動作しますが、モバイルではオフにします

Question

ボタンの写真です。列がなくても新しい行に落ちていて醜いので、ボタンが一緒に表示されたかったのです。今はブラウザで動作しますが、モバイルでは動作しません。 3つの列を定義していて、モバイルには余裕がないためです。しかし、ブラウザのサイズが変更されると、それに応じてボタンが移動します。モバイルでそれをどうやって行うのですか？

ブラウザ： モバイル：ここ

私が使用したコードは次のとおりです。あなたは小さな何かや、ボタンの少ないパディングにテキストのサイズを変更する必要が

<div class="row"> 

    <div class="col-xs-4"><a href="#ORM" button class="btn btn-block btn-info">Online Reputation</a></div> 
    <div class="col-xs-4"><a href="#review" button class="btn btn-block btn-info">Review Management</a></div> 
    <div class="col-xs-4"><a href="#SEO" button class="btn btn-block btn-info">SEO & Web</a></div> 

</div> 

Answer 1

モバイルデバイスでは、要素を表示するために使用できる幅は、通常、テキストを読み込み可能にしたまま（つまり、切り捨てられない、大きく縮小される、またはラップされる）

この問題の最も一般的な解決方法は、使用可能なスペースがある場合に並べて表示することですが、画面が特定の幅以下に縮小した後にそれらを積み重ねることです（media queriesを使用してスタイリングする） 。これは、デスクトップレイアウトがモバイルデバイスに正しく翻訳されることはめったにないため、レスポンシブデザインの重要な部分です。 （詳細はChanging the Page Layout Based on Breakpointsを参照してください）

ブートストラップにはフレームワークにブレークポイントが組み込まれているため、余分な作業をする必要はありません。 xs、sm、md、およびlgのいずれかのオプションがあります。correspond to predefined ranges of screen widthsです。

col-xs-4には既にxsブレークポイントが使用されています。これは、基本的に、すべての画面幅でボタンが4単位幅になることを意味します。しかし、あなたが気づいたように、これは狭いモバイルデバイスでは適切に表示されないため、次のオプションは幅を1つ上に移動してcol-sm-4を使用することです。そうすることで上記smとの任意の画面幅で4単位幅を維持するだろうが、画面がxs範囲に狭めたら、ボタンをスタックになります。

<div class="row"> 
    <div class="col-sm-4"><a href="#ORM" button class="btn btn-block btn-info">Online Reputation</a></div> 
    <div class="col-sm-4"><a href="#review" button class="btn btn-block btn-info">Review Management</a></div> 
    <div class="col-sm-4"><a href="#SEO" button class="btn btn-block btn-info">SEO & Web</a></div> 
</div> 

Here's a demoは、それがどのように見えるかをお見せします。お役に立てれば！ご質問がある場合はお知らせください。

Answer 2

それがモバイルに収まるようにします。あなたのCSSはどこですか？