Question

我无法在Bootstrap中拥有另一个div以上的这个div。基本上我在另一个div中有两个div。 div的其中一个包含图片，另一个包含文本。

我已经尝试了很多类似使用CSS更改边距的方法，但是由于某些原因它不起作用。

<div id="header" class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark">
        <div>
            <img id="andro" class="img-fluid">
        </div>
        <div id="mainP" class="bg-dark mx-auto mx-auto center-block">
          Text in here
        </div>
    </div>


#andro{
    max-width: 100%;
    float: left;
    opacity: .5;
    margin: 0;
    z-index: 5;
}

#mainP{
    z-index: 10;
    position: absolute;
    margin: auto;
    margin-right: 50vw;
}

所以我希望div“ mainP”在div“ andro”之上，但是我不知道为什么当我尝试使用CSS更改页边距和z-index时为什么不这样做。

Answer 1

在描述中，您给img而不是div分配了ID。

PS。您的代码不完整。请通过codepen / Fiddle添加CSS和HTML或工作示例。我们将无法提供帮助，而不要弄清楚到底是哪里出了问题。

Answer 2

如果将两个内部div以.row作为类包装在div中，则可以使用内置在引导程序中的排序类。 https://getbootstrap.com/docs/4.0/layout/grid/#reordering

  <div id="header" class="row position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-dark">
            <div class="order-2">
                <img id="andro" class="img-fluid">
            </div>
            <div id="mainP" class="order-1 bg-dark mx-auto mx-auto center-block">
              Text in here
            </div>
        </div>

Answer 3

希望这对您有所帮助。

请将图像和文本容器（#mainP）分成一格。

请尝试使用以下CSS。

    #mainP{
    z-index: 1;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom: 0;
    background-color: rgba(255,255,255,0.7);
}

   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 

<div class="position-relative d-inline-block">
            <img id="andro" src="https://images.all-free-download.com/images/graphicthumb/orange_crush_514795.jpg" class="img-fluid">
             <div id="mainP" class="d-flex justify-content-center align-items-center">
          Text in here
        </div>
        </div>

如何使这个div高于另一个div？

3 个答案: