4 колонки, реагирующие на Bootstrap

Question

Я хочу сделать строку с 4 столбцами. Когда пользователь использует планшет, строка будет иметь 2 столбца, а остальные 2 будут прыгать под строку.

Тогда, когда пользователь использует мобильный телефон, строка будет иметь 1 столбец, а остальные столбцы будут прыгать друг под другом.

Можете ли вы мне помочь? Я пробовал это:

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

Answer 1

Проблема, похоже, является границей или границей, которая может быть у вас для тех, у кого есть div. Кроме того, вы всегда должны обернуть их в <div class="row">

дают все из них один класс (скажем, «bootCols») и добавить этот CSS:

.bootCols{ 
    margin:0; 
    box-sizing:border-box; 
    padding:5px; 
    border:2px solid auto; 
} 

вы можете удалить/редактировать отступы и границы в этом CSS как вам требуется

Вот живой пример:

.bootCols{ 
 
    height:100px; 
 
    margin:0; 
 
    box-sizing:border-box; 
 
    padding:5px; 
 
    border:2px solid black; 
 
    background-color:red; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-3 col-sm-6 col-xs-12 bootCols"> 
 
     </div> 
 
     <div class="col-md-3 col-sm-6 col-xs-12 bootCols"> 
 
     </div> 
 
     <div class="col-md-3 col-sm-6 col-xs-12 bootCols"> 
 
     </div> 
 
     <div class="col-md-3 col-sm-6 col-xs-12 bootCols"> 
 
     </div> 
 
    </div> 
 
    </div>