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。

面板内的Bootstrap列

1 个答案: