如何控制divs重叠？

我得到了一些使用Bootstrap风格的div，但我只是给他们内联CSS（我知道这不正确），并添加了一些填充和边距。如何控制divs重叠？

当点击一个按钮时，我来了一个要显示的对象。这是一个可怕的重叠可以看到。

这是我的标记：

<div class="container" style="padding-top:150px;" ng-controller="ChangePDF as change"> 

    <div class="col-xs-1" style="margin-top:20px;"> 
     <ul class="nav nav-pills nav-stacked" ng-repeat="category in ['PTR Cuadrado','PTR Rectangular','Polín Z', 'Mallas','Lámina Lisa','Lámina Antiderrapante']"> 
      <li><button class="btn btn-success" style="width:150px; margin-top:7px; white-space: normal;" ng-click="change.changePDF(category)">{{category}}</button></li> 
     </ul> 
    </div> 

    <div class="col-xs-11 text-center" style="padding-left:20px;"> 

     <div style="margin-top:120px" id="msg"><h3><span class="fa fa-sign-in"></span>Selecciona cualquiera de las categorías a la izquierda <br>para ver nuestra lista detallada de productos</h3></div> 
     <div id="pdf" style="height:600px;"></div> 
    </div> 


</div>

即使是按钮不能在一些地区得到锚固性，我想是因为以前不可见的重叠。

在按钮的点击我删除#msg

效果可以看这里：

http://www.gintegraconstruccion.com/html/catalogo.html

来源

2014-05-23 diegoaguilar

什么是你想要的结果呢？ –

试试这个代码，它似乎工作：

<div class="container" style="padding-top:150px;" ng-controller="ChangePDF as change"> 

    <div class="col-xs-2" style="margin-top:20px;"> 
     <ul class="nav nav-pills nav-stacked" ng-repeat="category in ['PTR Cuadrado','PTR Rectangular','Polín Z', 'Mallas','Lámina Lisa','Lámina Antiderrapante']"> 
      <li> 
       <button class="btn btn-success" style="width:150px; margin-top:7px; white-space: normal;" ng-click="change.changePDF(category)">{{category}}</button> 
      </li> 
     </ul> 
    </div> 

    <div class="col-xs-10 text-center" style="padding-left:20px;"> 

     <div style="margin-top:120px" id="msg"> 
      <h3><span class="fa fa-sign-in"></span>Selecciona cualquiera de las categorías a la izquierda <br>para ver nuestra lista detallada de productos</h3> 
     </div> 
     <div id="pdf" style="height:600px;"></div> 
    </div> 


</div>

来源

2014-05-23 08:10:22 Manwal

只需添加更多的填充为 “120像素;”在这一行

<div class="col-xs-11 text-center" style="padding-left:20px;">

这可以解决您的问题。

还有一件事，内联风格是一个非常糟糕的做法，如你所知。所以请尝试添加内部或外部CSS。

来源

2014-05-23 08:06:32 user3662273

问题是你使用的是带有响应固定单位的方式，例如

集装箱宽度1170px（这是好的），但塔分区是不正确的

col-xs-1 is 8.33% that comes to 97px

和150px到按钮内的指定宽度210

解决方案是

<div class="col-xs-2" style="margin-top:20px;"> 
</div> 

<div class="col-xs-10 text-center" style="padding-left:20px;"> 
</div>

来源

2014-05-23 08:12:20

如何控制divs重叠？

回答

相关问题