부트 스트랩 3 반응 패널에 대한 설정 폭 문제

Question

This Demo을 살펴보고 왜 패널의 제목이 데모와 같이 작동하는지 (왼쪽 및 오른쪽 여백 있음) 알려주시겠습니까? 내가 게시물 제목에 언급 한 바와 같이 은 그래서 양식과 같은 righttoc-->panel panel-default-->의 측면에있는 모든 요소는 문제는 당신이 중첩 한 것이 대부분이다 응답

<div class="row"> 
<div class="col-lg-2 col-md-2 col-sm-2 col-sx-12" id="lefttoc">Left</div> 
<div class="col-lg-7 col-md-7 col-sm-7 col-sx-12" id="maptoc">Center</div> 
<div class="col-lg-3 col-md-3 col-sm-3 col-sx-12" id="righttoc"> 
<div class="panel panel-default col-lg-10 col-md-11 col-sm-2 col-sx-12 "> 
    <div class="panel-heading"> 
    <h3 class="panel-title">Panel title</h3> 
    </div> 
    <div class="panel-body"> 
    Panel content 
    </div> 
</div> 
</div> 
</div><!-- End of Row --> 

감사

Answer 1

행동 반응 형 패널을 만들려고하고 있어요 열을 사이에 필요한 행 요소를 추가하지 않고. 문제를 해결하는 행에는 음수 여백이 있습니다.

대신이 시도 :

<div class="row"> 
    <div class="col-sm-2 col-xs-12" id="lefttoc">Left</div> 
    <div class="col-sm-7 col-xs-12" id="maptoc">Center</div> 
    <div class="col-sm-3 col-xs-12" id="righttoc"> 
     <div class="row"> 
      <div class="col-lg-10 col-md-11 col-sm-2 col-xs-12"> 
       <div class="panel panel-default"> 
        <div class="panel-heading"> 
         <h3 class="panel-title">Panel title</h3>  
        </div> 

        <div class="panel-body">Panel content</div> 
       </div> 
      </div> 
     </div><!-- End of Row --> 
    </div> 
</div><!-- End of Row -->