主页 / 问题 / 1216259
Accepted
Wells
Asked:2021-12-09 19:56:14 +0800 CST2021-12-09 19:56:14 +0800 CST

引导列由于边距而换行

  • 772

我正在掌握引导网格并且发生了某个事件。我需要 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/bootstrap@4.5.3/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>

bootstrap

1 个回答

  1. Best Answer

    要使布局样式起作用，这些块必须具有零填充（即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/bootstrap@4.5.3/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>

    • 0

相关问题