ブートストラップ3が必要に応じて動作しない

Question

私は3つのボタンをブートストラップ3を使用してコンテナに入れています。コンピュータ（ラップトップまたはデスクトップPC）でウェブサイトを表示しているときは正常に動作します。しかし、モバイルで見たウェブサイトは、必要に応じて機能しません。

私は.col-xs-12 .col-md-4に追加しましたが、ボタンは画面の全幅にまたがっておらず、テキストはコンテナ内にとどまっていません。ここで

は三つのボタンのコードです：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
     <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>Header 4</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-xs-12 col-md-4"> 
 
      <button type="button" class="btn " aria-label="center Align"> 
 
       <a href="pricing.html" target="_blank"> 
 
       <h4>Header 4</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-xs-12 col-md-4"> 
 
      <button type="button" class="btn " aria-label="center Align" disabled> 
 
       <h4>Header 4</h4> 
 
       <p><strong>£££</strong><span>/ £££ a month</span></p> 
 
       <p id="tempBottom"><strong>Coming Soon</strong></p> 
 
      </button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

#cheapestOption { 
 
    font-family: 'Pavanam', sans-serif; 
 
    width: 100%; 
 
    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; 
 
} 
 

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

うまくいけば、画像がより多くの意味を行います。

Answer 1

メディアクエリを次のように試してみてください各.btnクラスに

を.btn-block-xsを追加します。

あなたがあなたの必要性に応じて

をメディアクエリの値を変更することができます

CSS：

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

Answer 2

（。あなたはボタンクラスに組み込まれたブートストラップを使用している場合、これは自動的に行わなければならない、ノート）メディアクエリであなたのボタンモバイル幅を与える

例：

@media only screen and (max-width: 767px) { 
    button.btn{ 
     display:block; //force them to stack 
     width:80% !important; // on small screens the buttons will be 80% screen width while 
     //leaving room for touch scrolling on the sides. 
     margin: 0 auto; //to center them on small screens 
    } 
} 

Answer 3

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
     <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-xs-12 col-md-4"> 
 
      <button type="button" class="btn btn-block" aria-label="center Align"> 
 
       <a href="pricing.html" target="_blank"> 
 
       <h4>Header 4</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-xs-12 col-md-4"> 
 
      <button type="button" class="btn btn-block" aria-label="center Align"> 
 
       <a href="pricing.html" target="_blank"> 
 
       <h4>Header 4</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-xs-12 col-md-4"> 
 
      <button type="button" class="btn btn-block" aria-label="center Align" disabled> 
 
       <h4>Header 4</h4> 
 
       <p><strong>£££</strong><span>/ £££ a month</span></p> 
 
       <p id="tempBottom"><strong>Coming Soon</strong></p> 
 
      </button> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

：グリッドの幅にまたがるボタンの btn-blockを追加