Question

我希望引导响应式布局具有四个居中对齐的框，每个框均带有图像和文本。请参阅所附图片

我尝试了以下操作，但是这些框之间没有空格，并且无法正确显示。

setString

Answer 1

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

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

Answer 2

我不确定您需要在盒子之间留多少空间？如果是，那么您需要应用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 */
}

但是请记住，对于响应式视图，您应该进行相应的修改。

<!DOCTYPE html>
<html>
<head>
	<title>Modal</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
	.colMenu{
	border-style: solid;
	border-width: 3px;
	border-color: #000000;
	width: calc(33.333333% - 30px);
	margin:15px;
	}
	
	.menuImg{
	height: 40%;
	margin-left: auto;
	margin-right: auto;
	display: block;
	}
    </style>
</head>
<body>
<div class="row  justify-content-center">
<div class="col-4 colMenu">
     <h3>SAMPLE TEXT</h3>
    <img src="https://via.placeholder.com/150x150"
class="menuImg">
</div>
<div class="col-4 colMenu ">
        <h3 >SAMPLE TEXT</h3>
       <img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>

<div class="w-100"></div>

<div class="col-4 colMenu ">
<h3>SAMPLE TEXT</h3>
<img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>
   <div class="col-4 colMenu">
        <h3 >SAMPLE TEXT</h3>
       <img src="https://via.placeholder.com/150x150" class="menuImg">
   </div>
</div>
</body>
</html>

Answer 3

您要在这里做什么？您是否希望代码执行图像中显示的操作？

首先，我认为尝试将引导程序和硬编码的CSS规则混合使用是错误的。和 <div class="w-100"></div>的用途是什么？

您要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-3替换col-md-6：

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

现在，如果要使其居中且较小，则需要使用偏移量并减小其尺寸。对于第一个示例，您将有一个<div class="col-md-offset-1 col-md-5">和<div class="col-md-offset-5 col-md-5">或类似的东西;）

https://getbootstrap.com/docs/4.0/layout/grid/#offset-classes

自举四边距布局

3 个答案: