Bootstrap 3 не работает по мере необходимости

Question

У меня есть 3 кнопки в контейнере с использованием Bootstrap 3. Когда веб-сайт просматривается на компьютере (ноутбуке или настольном ПК), они работают нормально. Однако, когда сайт просматривается на мобильных устройствах, они не функционируют по мере необходимости.

Я добавил в .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-block-xs каждому .btn класс

Попробуйте со следующими медиа-запроса:

вы можете изменить значение средств массовой информации запросов в соответствии с вашими потребностями

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

Добавить btn-block для кнопки, чтобы охватить ширину сетки:

<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>