Question

我正在设计一个网站。我在学院页面上遇到了一些问题。问题如下。

[！[在此处输入图像说明] [1]] [1]

我希望Div a到达位置b。不改变响应度。（如果可能的话，引导程序）

<div class = "row d-flex justify-content-center align-items-start align-content-around">
				
<div class = "item text-light wow fadeInUp bg-dark col-sm-5 col-xm-5"></div>
<div class = "item text-light wow fadeInUp bg-dark col-sm-5 col-xm-5"></div>
<div class = "item text-light wow fadeInUp bg-dark col-sm-5 col-xm-5"></div>
</div>

Answer 1

目前的标记不可能，如下所示......

＆＃13;

.item {
  margin-bottom: 10px;
  border: 5px solid #fff;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row d-flex justify-content-center align-items-start">
  <div class="item text-light wow fadeInUp bg-dark col-5" style="height:150px;"></div>
  <div class="item text-light wow fadeInUp bg-dark col-5" style="height:100px;"></div>
  <div class="item text-light wow fadeInUp bg-dark col-5" style="height:100px;"></div>
  <div class="item text-light wow fadeInUp bg-dark col-5" style="height:100px;"></div>
</div>

＆＃13;

你需要将左右div包装在不同的div中，如下所示......

＆＃13;

.item {
  margin-bottom: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row d-flex justify-content-center align-items-start">
  <div class="col-5">
    <div class="item text-light wow fadeInUp bg-dark" style="height:200px;"></div>
    <div class="item text-light wow fadeInUp bg-dark" style="height:100px;"></div>
  </div>
  <div class="col-5">
    <div class="item text-light wow fadeInUp bg-dark" style="height:100px;"></div>
    <div class="item text-light wow fadeInUp bg-dark" style="height:100px;"></div>
  </div>
</div>

＆＃13;

Answer 2

您可以尝试下面给出的多类行和列。

<div class = "row d-flex justify-content-center align-items-start align-content-around">     
<div class = "item text-light wow fadeInUp bg-dark col-sm-5 col-xm-5"></div>
<div class = "item text-light wow fadeInUp bg-dark col-sm-5 col-xm-5"></div>
  <div class="row"><div class = "item text-light wow fadeInUp bg-dark col-sm-5 col-xm-5"></div></div>
  <div class="row"><div class = "item text-light wow fadeInUp bg-dark col-sm-5 col-xm-5"></div></div>
</div>

Postion Divs使用bootstrap在容器内

2 个答案: