面板内的自举列

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％，那么你的内容（.fa .fa-angle-right/left）不适合，因为它比8.333％更大。这不是此类布局的最佳解决方案，但您可以在左侧和右侧尝试.col-xs-2，中间则可以尝试.col-xs-8。