내 버튼이 포함 된 div 외부에 나타나는 이유는 무엇입니까?

Question

나는 내 문제를 보여주는 fiddle here을 가지고 있습니다. 문제를 표시하려면 '결과'사분면을 더 넓게 만들어야 할 수 있습니다.

첫번째 I에서 :

내가 내 부트 스트랩 레이아웃의 열 몇 가지있다하지만 부모 div의 내부 레이아웃 내 버튼을 얻이 수없는 것, 항상 겹쳐 보인다 부트 스트랩의 열이 패딩 된 것이 원인이라고 생각했지만 문제를 해결하고 제거했습니다. 나는 분명히 이것이 어떻게 작동해야하는지에 대한 근본적인 것이 빠져있다. 따라서 CSS에 대한 어떤 도움을주는 어떤 포인터도 잘못 될지도 모른다.

<div class="col-md-3 col-lg-3 nopadding"> 
    <div class="definition-pallette"> 
      <div class="row nopadding"> 
       <div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div> 
      </div> 
    </div> 
    </div> 

및 부트 스트랩 기본 상단의 추가 CSS는 다음과 같습니다

이

내 HTML은 다음과 같습니다

분명히 내가 지금 여기에 바이올린에 대한 링크를 포함하는 몇 가지 코드에 연결해야하는 일부입니다 :

Answer 1

여기에 몇 가지 일이있는 것으로 보입니다. 주요 문제는 '열'div 안에 'col'클래스가있는 많은 div를 사용하고 있다는 것입니다. 그들을 행동하게 시작하려면 col의 크기를 정의해야합니다. 이렇게하면 대부분의 문제가 해결됩니다. 그래서 예를 들면, 당신이 뭔가에

<div class="row"> 
    <div class="col-xs-12">Some content</div> 
</div> 

처럼 그리고 그것은 행동을 시작하는이

<div class="row"> 
    <div class="col">Some content</div> 
</div> 

변경이 곳.

당신이 필요로하지 않기 때문에 나는 또한 .nopadding 클래스를 없앴습니다.

업데이트 된 피들입니다 - http://jsfiddle.net/T4XY4/1/ - 오른쪽 패널의 대부분을 수정하지만 나머지는 남겨 둘 것입니다. '행'div에서 실제로 원하는 클래스를 선택하고 싶을 수도 있습니다. 편의를 위해 xs-12에 머물렀습니다. http://getbootstrap.com/css/#grid-nesting

Answer 2

여백을 추가하는 행 클래스의 부트 스트랩 여백으로 인해 발생합니다. 0; 안쪽 여백 클래스를 수정하면 다른 장소 나 휴대 기기에서 레이아웃 문제가 발생할 수 있습니다.

.row { 
    margin-right: -15px; 
    margin-left: -15px; 
}