Колонки bootstrap переносятся из-за margin

Question

Осваиваю сетку bootstrap и возник некий казус. Мне нужно чтобы при ширине планшета col-md колонки выстраивались не 3 в ряд, а 2 в ряд. Без отступов все работает, но при добавлении m-1 вторая плитка падает вниз. Как я могу задать разный отступ, но чтобы плитки были в 2 столбца?

.tab {
    text-align: center;    
    border: 1px solid red;
}

.block {
    height: 100px;
}

.btn {
    display:block;
    margin: 1rem auto 1rem auto;
    
    border: 1px solid blue;
    width: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <title>Document</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-6 col-lg col-xl mts tab m-1">
                <div class="block"></div>
                <span>MTS</span>
                <div class="btn">Click</div>
            </div>
            <div class="col-12 col-md-6 col-lg col-xl buh tab m-1">
                <div class="block"></div>
                <span>БУХ</span>
                <div class="btn">Click</div>
            </div>
            <div class="col-12 col-md-6  col-lg col-xl mash tab m-1">
                <div class="block"></div>
                <span>МАШ</span>
                <div class="btn">Click</div>
            </div>
            <div class="w-100 d-md-none d-lg-block "></div>
            <div class="col-12 col-md-6 col-lg col-xl evator tab m-1 ">
                <div class="block"></div>
                <span>Эватор</span>
                <div class="btn">Click</div>
            </div>
            <div class="w-100 d-none d-md-block d-lg-none"></div>
            <div class="col-12 col-md-6 col-lg col-xl ecp tab m-1">
                <div class="block"></div>
                <span>ЭЦП</span>
                <div class="btn">Click</div> 
            </div>
            <div class="col-12 col-md-6 col-lg col-xl onec tab m-1">
                <div class="block"></div>
                <span>1С</span>
                <div class="btn">Click</div> 
            </div>
        </div>
    </div>

Answer 1

Чтобы работали стили layout, необходимо чтобы у этих блоков был нулевой отступ (то есть margin: 0).

Если вам нужен отступ рамок, то вы можете сделать любой отступ во внутренних блоках.

.tab {
    text-align: center;    
    border: 1px solid red;
    box-sizing: border-box;
}

.block {
    height: 100px;
}

.btn {
    display:block;
    margin: 1rem auto 1rem auto;
    
    border: 1px solid blue;
    width: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <title>Document</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 col-md-6 col-lg col-xl mts">
              <div class="tab m-1">
                <div class="block"></div>
                <span>MTS</span>
                <div class="btn">Click</div>
               </div>
            </div>
            <div class="col-12 col-md-6 col-lg col-xl buh">
              <div class="tab m-1">
                <div class="block"></div>
                <span>БУХ</span>
                <div class="btn">Click</div>
               </div>
            </div>
            <div class="col-12 col-md-6  col-lg col-xl mash">
              <div class="tab m-1">
                <div class="block"></div>
                <span>МАШ</span>
                <div class="btn">Click</div>
               </div>
            </div>
            <div class="w-100 d-md-none d-lg-block "></div>
            <div class="col-12 col-md-6 col-lg col-xl evator">
               <div class="tab m-1">
                <div class="block"></div>
                <span>Эватор</span>
                <div class="btn">Click</div>
               </div>
            </div>
            <div class="w-100 d-none d-md-block d-lg-none"></div>
            <div class="col-12 col-md-6 col-lg col-xl ecp">
              <div class="tab m-1">
                <div class="block"></div>
                <span>ЭЦП</span>
                <div class="btn">Click</div> 
               </div>
            </div>
            <div class="col-12 col-md-6 col-lg col-xl onec">
              <div class="tab m-1">
                <div class="block"></div>
                <span>1С</span>
                <div class="btn">Click</div> 
               </div>
            </div>
        </div>
    </div>

БЛОГ НА HUSL

Колонки bootstrap переносятся из-за margin

Ответы (1 шт):