Html 带边距的自举四盒布局

我想要引导式响应布局，四个中心对齐的框，每个框中有图像和文本。请参阅所附图片

我尝试了以下方法，但方框之间没有空间，无法正确显示

<div class="row  justify-content-center">
                        <div class="col-4 colMenu">
                             <h3>SAMPLE TEXT</h3>
                            <img src="./assets/img/sample.png"
class="menuImg">
                        </div>
                        <div class="col-4 colMenu ">
                                <h3 >SAMPLE TEXT</h3>
                               <img src="./assets/img/sample.png" class="menuImg">
                           </div>

                        <div class="w-100"></div>

                        <div class="col-4 colMenu ">
                        <h3>SAMPLE TEXT</h3>
                        <img src="./assets/img/sample.png" class="menuImg">
                           </div>
                           <div class="col-4 colMenu">
                                <h3 >SAMPLE TEXT</h3>
                               <img src="./assets/img/sample.png" class="menuImg">
                           </div>
                      </div>



.colMenu{
      border-style: solid;
      border-width: 3px;
      border-color: #000000;
  }

  .menuImg{
    height: 40%;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

示例文本
示例文本
示例文本
示例文本
.colMenu{
边框样式：实心；
边框宽度：3倍；
边框颜色：#000000；
}
梅努伊姆先生{
身高：40%；
左边距：自动；
右边距：自动；
显示：块；
}

---

你想在这里做什么？您希望您的代码执行图像中显示的操作吗

首先，我认为您尝试混合使用引导和硬编码css规则是错误的。及 什么是

您想要2x2块还是4块以内联方式显示

对于第一种情况，您需要以下代码：

 <div class="row">
      <div class="col-md-6 colMenu">
           <h3>SAMPLE TEXT</h3>
           <img src="./assets/img/sample.png" class="menuImg">
       </div>
       <div class="col-md-6 colMenu">
            <h3 >SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>
       <div class="col-md-6 colMenu">
            <h3>SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>

       <div class="col-md-6 colMenu">
            <h3 >SAMPLE TEXT</h3>
            <img src="./assets/img/sample.png" class="menuImg">
       </div>
 </div>

示例文本
示例文本
示例文本
示例文本

对于第二种情况，您需要将col-md-6替换为col-md-3，如下所示：

<div class="row">
      <div class="col-md-3 colMenu">
           <h3>SAMPLE TEXT</h3>
           <img src="./assets/img/sample.png" class="menuImg">
       </div>
...

示例文本
...

现在，如果您希望它居中且更小，则需要使用偏移并减小大小。对于第一个示例，您将有一个

和一个

或类似的东西；）

---

您需要为每个框添加边距，因为边框忽略了填充

.colMenu {
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  margin: 0 0 10px 10px;
}

---

我不知道你需要多少空间，在盒子之间？如果是，那么您需要应用

calc（）

函数来实现

col-4

我想您使用的是Bootstrap最新版本：

.colMenu{
  border-style: solid;
  border-width: 3px;
  border-color: #000000;
  width: calc(33.333333% - 30px); /* 30px of combined 2 side margin 15+15 = 30
  margin:15px; /* Applied margin */
}

但请记住，对于响应性视图，您应该相应地进行修改

情态动词
.colMenu{
边框样式：实心；
边框宽度：3倍；
边框颜色：#000000；
宽度：钙（33.333333%-30px）；
利润率：15px；
}
梅努伊姆先生{
身高：40%；
左边距：自动；
右边距：自动；
显示：块；
}
示例文本
示例文本
示例文本
示例文本

将col-4类更改为col-3如果每行仅需要两个框，则应使用两行，每行仅使用两个col。对不起，我不熟悉全新引导4的功能。似乎是一个合法的方式做这件事，因为你已经做了。不过，我不知道是否有可能（或者至少有可能）在引导的行/列之间引入填充。您最好在每个

col

元素中添加一个框，并在这些框上设置边框/轮廓和边距。

class=“w-100”

来自新的Bootstrap 4网格系统。查看此链接：