패널의 부트 스트랩 열

Question

패널 내부에 3 개의 열을 만들려고하고 있는데 어떤 이유로 xs 뷰포트가 올바르게 보이지 않습니다. 마지막 열은 행 아래로 이동합니다. 너는에 그것을 볼 수있다 this jsfiddle.

나는 틀린 무엇을 할지도 모른다 어떤 단서?

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-12"> 
     <div class="panel panel-default content-parent"> 
     <div class="panel-header content-header"> 
      <div class="row content-header-assets"> 
      <div class="col-xs-1"> 
       <i class="fa fa-angle-left content-header-actions"></i> 
      </div> 
      <div class="col-xs-10"> 
       <h1 class="content-header-title text-center">Some long text</h1> 
      </div> 
      <div class="col-xs-1"> 
       <i class="fa fa-angle-right content-header-actions"></i> 
      </div> 
      </div> 
     </div> 
     <div class="panel-body"> 
      <div class="content-body col-xs-12 col-sm-10 col-md-9 col-lg-7 block-center"> 

      </div> 
     </div> 
     <div class="panel-footer content-footer text-center"> 

     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

.col-*-1는 제공된 공간의 8.33333333 %이므로이 8.333 %보다 큰 이후 콘텐츠합니다 (.fa .fa-angle-right/left)은 적합하지 않습니다. 이것은이 유형의 레이아웃을위한 최선의 해결책은 아니지만 왼쪽에 .col-xs-2, 중간에 .col-xs-8을 시도 할 수 있습니다.