html - 面板内的 Bootstrap 列

Question

我正在尝试在面板内创建 3 列，但出于某种原因，xs 视口(viewport)看起来不正确。最后一列移到该行下方。你可以在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中间。