Question

我在bootstrap中遇到绝对位置图像问题。当第二列应该跳转到较小屏幕尺寸的下一行时，它只是重叠图像。这是我现在的代码：

  <div class="row">
    <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
      <div id="imgdiv">
        <img id="ximage" src="css/images/x-ray-lat-left.png" width="578" height="715" border="0"/>
        <img id="emptygif" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" width="578" height="715" usemap="#location-map" border="0"/> 
        <img id="overlayr1">&nbsp;</img>  
        <img id="overlayr2">&nbsp;</img>
        <img id="overlayr3">&nbsp;</img>
        <map name="location-map" id="location-map" border="0">
          <area id="r1" shape="rect" coords="250,250,340,370" href="#" alt="Hilum"/>
          <area id="r2" shape="rect" coords="90,150,340,500" href="#" alt="Heart"/>          
          <area id="r3" shape="rect" coords="130,120,460,530" href="#" alt="Righ Lung"/>
        </map>
      </div>
    </div>

    <div class="col-lg-3 col-md-6 col-sm-10 col-xs-10">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Information</h3>
        </div>
        <div id="imgdesc" class="panel-body">
          Description de l'image
        </div>
      </div>
    </div>

我在第一列中的所有图像都是这样的：

#ximage{
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    background-repeat: no-repeat;
    z-index:0;
}

在md sm和xs scree大小中，第二列应低于第一列，但由于图像的绝对定位，它会与它们重叠。

知道如何解决这个问题吗？

Answer 1

这不是最佳做法。

DEMO https://jsfiddle.net/maxlipsky/gm8612e4/3/

您可以添加辅助类（并将其隐藏在大型列上）：

.h20 {
    height: 20px;   
}

并像分隔符一样使用它：

<div class="container">
    <div class="row">
    <div class="col-lg-8 col-xs-12">
      <div id="imgdiv">
        <img id="ximage" src="css/images/x-ray-lat-left.png" width="578" height="715" border="0"/>
        <img id="emptygif" src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" width="578" height="715" usemap="#location-map" border="0"/> 
        <map name="location-map" id="location-map" border="0">
          <area id="r1" shape="rect" coords="250,250,340,370" href="#" alt="Hilum"/>
          <area id="r2" shape="rect" coords="90,150,340,500" href="#" alt="Heart"/>          
          <area id="r3" shape="rect" coords="130,120,460,530" href="#" alt="Righ Lung"/>
        </map>
      </div>
    </div>
    <div class="col-lg-4 col-sm-12 col-xs-10">
        <div class="h20 hidden-lg bg-warning"></div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Information</h3>
            </div>
            <div id="imgdesc" class="panel-body">
                Description de l'image
            </div>
        </div>
    </div>
</div>

列在引导程序中重叠绝对位置图像

1 个答案: