如何控制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重疊？

回答

相關問題