ブートストラップ3のコードが期待通りに機能しない

Question

私はこれと同じ質問をアップロードしましたが、非常に混雑していましたので、もう少し問題を説明するためにもう一度質問をしています。

私は現在、HTML、CSS、およびJavaScriptを使用して自分のウェブサイトをブートストラップと共に作成しています。サイトをモバイルフレンドリーにしようとしているうちに、3つのボタンがどのように画面に表示されているかに間違いを感じました。基本的には、3つのボタンを重ねて、ウェブページをモバイルで見たときに、それぞれのボタンの間にギャップを置いて重ね合わせるということです。ただし、ボタンが正しく表示されません。最初の画像を参照してください。

私が言うことの1つは、inspect要素をクリックしたときにその機能を使用しているということです（Google Chromeのみであるかどうかはわかりません）ページはモバイル画面のように見えます。私が得意なのは、コードが間違っているのか、Google Chromeの機能がうまく機能しないのかわからないということです。

モバイルデバイスでHTMLファイルを表示するために使用できるアプリケーションについてご意見がありましたら、お知らせください。

ご注意ください。他の2つは基本的に

@media (max-width: 767px){ 
 
    .btn-block-xs { 
 
    display: block; 
 
    width: 100%; 
 
    margin-bottom: 10px; 
 
    } 
 
} 
 

 
#cheapestOption { 
 
    font-family: 'Pavanam', sans-serif; 
 
    background-color: rgba(255,255,255,0.3); 
 
    border: none; 
 
} 
 

 
#cheapestOption a { 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
#cheapestOption p { 
 
    font-family: 'Pavanam', sans-serif; 
 
    font-size: 50px; 
 
} 
 

 
#cheapestOption ul{ 
 
    text-align: left; 
 
    font-size: 17px; 
 
} 
 

 
#cheapestOption:hover { 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
    text-decoration: none; 
 
}

<div class="container-fluid" id="grad"> <!-- Pricing Buttons --> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-md-4"> 
 
      <button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align"> 
 
       <a href="pricing.html" target="_blank"> 
 
       <h4>Text</h4> 
 
       <p><strong>£££</strong><span>/ £5 a month</span></p> 
 
       <ul> 
 
        <li> Text </li> 
 
        <li> Text </li> 
 
        <li> Text </li> 
 
        <li> Text </li> 
 
       </ul> 
 
       </a> 
 
      </button> 
 
      </div>

SAMEされているような私はONLY（1枚目は、それが携帯電話でどのように見えるかを示す）（これは必要なものであるのいずれかのボタンのコードを与えています） （第二の絵が、それはデスクトップ上にどのように見えるかを示す）（これは結構です）

を固定10

Answer 1

あなたはhtmlとcssは実際にはブートストラップの文書に従っていません。私はあなたがブートストラップがどのように動作するかについてもっと読むことをお勧めします。あなたは何をやっているのかを簡単にすることができ、おそらくもっと良く見えるようにすることもできます。

リンクであるボタンを作成してテキストをそこから移動することをお勧めします。あなたの質問に正確に答えるには、jsfiddleをご覧ください。

私はここであなたのためにこれを簡素化するために、あなたはもう質問がある場合は私が知っている

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4 col-sm-4 col-xs-4"><button type="button" id="cheapestOption" class="btn btn-block-xs" aria-label="center Align"> 
      <a href="pricing.html" target="_blank"> 
      <h4>Text</h4> 
      <p><strong>£££</strong><span>/ £££ a month</span></p> 
      <ul> 
       <li> Text </li> 
       <li> Text </li> 
       <li> Text </li> 
       <li> Text </li> 
      </ul> 
      </a> 
     </button></div> 
    <div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="averageOption" class="btn btn-block-xs" aria-label="center Align"> 
      <a href="pricing.html" target="_blank"> 
      <h4>Text</h4> 
      <p><strong>£££</strong><span>/ £££ a month</span></p> 
      <ul> 
       <li> Text </li> 
       <li> Text </li> 
       <li> Text </li> 
       <li> Text </li> 
      </ul> 
      </a> 
     </button></div> 
    <div class="col-md-4 col-sm-4 col-xs-4"> <button type="button" id="expensiveOption" class="btn btn-block-xs" aria-label="center Align" disabled> 
      <h4>Text</h4> 
      <p><strong>£££</strong><span>/ £££ a month</span></p> 
      <p id="tempBottom"><strong>Coming Soon</strong></p> 
     </button></div> 
</div> 
</div> 

CSS

/* Latest compiled and minified CSS included as External Resource*/ 

/* Optional theme */ 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 

#cheapestOption { 
    font-family: 'Pavanam', sans-serif; 
    background-color: red; 
    border: none; 
} 

#cheapestOption a { 
    text-decoration: none; 
    color: white; 
} 

#cheapestOption p { 
    font-family: 'Pavanam', sans-serif; 
    font-size: 1em; 
} 

#cheapestOption ul { 
    text-align: left; 
    font-size: 17px; 
} 

#cheapestOption:hover { 
    background-color: rgba(255, 255, 255, 0.6); 
    text-decoration: none; 
} 

#averageOption { 
    font-family: 'Pavanam', sans-serif; 
    width: 100%; 
    background-color: red; 
    border: none; 
    color: white; 
} 

#averageOption a { 
    text-decoration: none; 
    color: white; 
} 

#averageOption p { 
    font-family: 'Pavanam', sans-serif; 
    font-size: 1em; 
} 

#averageOption ul { 
    text-align: left; 
    font-size: 17px; 
} 

#averageOption:hover { 
    background-color: rgba(255, 255, 255, 0.6); 
} 

#expensiveOption { 
    font-family: 'Pavanam', sans-serif; 
    width: 100%; 
    background-color: red; 
    border: none; 
    color: white; 
} 

#expensiveOption a { 
    text-decoration: none; 
    color: white; 
} 

#expensiveOption p { 
    font-family: 'Pavanam', sans-serif; 
    font-size: 1em; 
} 

#expensiveOption ul { 
    text-align: left; 
    font-size: 1em; 
} 

をしてみましょう正しいcol classにあるように、あなたのhtmlをしている移動覚えておくべきいくつかのもの、

ブートストラップが内蔵されています最初に携帯電話を起動します。 各行は12個で構成されていますので、col-md-4に指示すると、ブラウザがcol-mdの幅であれば、行の幅の1/3を占めるようになります。

デフォルトでは、cssはブートストラップに組み込まれており、col-xs col-sm -col-mdなどを使用してターゲット設定できます。各col-sizeのデフォルトサイズを確認するには、ドキュメントまたはinspect要素を確認し、 DOMのクラス。

Bootstrap Grid System

あなたが特定の画面幅でスタックしCOL-サイズが必要な場合、これはあなたが何ができるかです。

画面はSMサイズの幅であるとき、それはある12を取り上げるので、画面はあなたがそれらをあなたができるスタックしたいSMとき場合、

<div class="row"> 
    <div class="col-sm-12"> 
    <p>My text here will be on this row alone.</p> 
    </div> 
<div class="col-sm-12"> 
    <p>My text here will be on this row alone.</p> 
    </div> 
<div class="col-sm-12"> 
    <p>My text here will be on this row alone.</p> 
    </div> 
</div> <!-- end of row --> 

これはsmサイズにスタックします全体の空間。そのため、メディアクエリが起動し、colが全体の行を占めるようになります。

各クラスも同様にスタックできます。ブラウザがそのdivの中にあるものは何でも、HTML、それらのクラスのターゲット幅のそれぞれにあるときに、あなたが今

<div class="col-xs-12 col-sm-12 col-md-12 "> 

、あなたがこれを行うことができ、各コルスタックはMDで始まることを確認したいのであれば、行全体を占有します。