javascript - 如何在引导程序中将方形 div 居中在两列的中间？

问题描述

我连续有两列col-6和一个 jumbotron 这是我的代码：

  <div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
      <h1>Test</h1>   
    </div>          
    <div class="container-fluid">
    <div class="row">        
    <div class="col-md-12">        
    <p class="text-center square">TEST</p>        
    </div>        
    </div>
      <div class="row">
        <div class="col-sm-6">
          <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>           
        </div>
        <div class="col-sm-6">
          <h3>test</h3>        
        </div>   
      </div>
    </div>

这是我的造型：

.square {
  height: 50px;
  width: 50px;
  background-color: #9FB6A6;
  border-radius: 3px;  
}

这就是我想要实现的目标：

我试过的：

我已经使用了text-center类和z-index. 问题是我无法像草图中那样在 jumbotron 上获得方形 div。

在这里，您有一个 jsfiddle，因此您可以看到行为：

https://jsfiddle.net/rmjy5pch/

有人可以指出我正确的方向吗？

标签： javascripthtmlcsstwitter-bootstrapbootstrap-4

您可以使用这样的绝对定位来实现

https://jsfiddle.net/oqyzsxc3/3/

<body>

<div class="jumbotron text-left" style="background-image: url(https://mdbootstrap.com/img/Photos/Others/gradient1.jpg); background-size: cover;">
  <h1>Test</h1>

</div>

<div class="container-fluid position-relative">
  <div class="square-container text-center">
    <p class=" square">TEST</p>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit </h3>
    </div>
    <div class="col-sm-6">
      <h3>test</h3>
    </div>
  </div>
</div>
</body>

.square {
  height: 50px;
  width: 50px;
  background-color: #9FB6A6;
  border-radius: 3px;
  margin: 0 auto;
}

.square-container {
  position: absolute;
  top: -60px;
  width: 100%;
}

javascript - 如何在引导程序中将方形 div 居中在两列的中间？

问题描述

解决方案

推荐阅读