div가 겹치는 것을 어떻게 제어 할 수 있습니까?

Question

부트 스트랩으로 스타일이 지정된 일부 div가 있지만 인라인 CSS (올바른 것은 아님)를 제공하고 약간의 여백과 여백을 추가했습니다.

버튼을 클릭하면 표시 할 개체가 나타납니다. 그리고 그것은 끔찍한 겹침이 보일 때입니다.

이

내 마크 업입니다 :

<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> 

에도 버튼이 일부 지역에서 앵커 특성을 얻을 수 없다, 나는 때문에 이전에 보이지 중복 생각합니다. "120 픽셀;"

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

Answer 1

의이 작동하는 것 같군이 코드를보십시오 :

컨테이너 폭이 1170px 예를 들면

<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> 

Answer 2

단지로 더 패딩을 추가

버튼의 클릭에 나는 #msg

효과는 여기에서 볼 수 있습니다 제거 이 줄의

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

이렇게하면 문제가 해결 될 수 있습니다.

그리고 한 가지 더, 인라인 스타일은 실제로 알고있는 것처럼 나쁜 습관입니다. 내부 또는 외부 CSS를 추가하십시오.

Answer 3

문제는 당신이 반응 고정 장치를 사용하는 방법을, (이 괜찮습니다)하지만, 열 부문

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>