Bootply

Question

我使用的是Bootstrap v-3.0.2。我在使用pull-right进入div col类时遇到了一个问题。请查看以下URL。检查全屏和最小化视图。

在Mobile-view中，两个面板都已合并。但它应该是分开的。两个div面板类都有网格轴值12（col-xs-12）。如果我尝试使用不同的值，它可以正常工作。

它是bootstrap 3的错误吗？

Answer 1

改为使用col-sm-push和col-sm-pull。

此外，如果您希望任何大于col-md-6的屏幕上的50％宽度列，则无需使用col-lg-6和xs。

<div class="container">
  <!-- div's are merged.But It should be one after another -->
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-sm-push-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Right Panel</h3>
          </div>
          <div class="panel-body">
             Right Panel content
          </div>
        </div>
      </div>

      <div class="col-xs-12 col-sm-6 col-sm-pull-6">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">Left Panel</h3>
          </div>
          <div class="panel-body">
            Left Panel content
          </div>
        </div>
      </div>
    </div>
</div>

Bootply

Answer 2

我不确定为什么您需要将.pull-right添加到列中，但如果您将.clearfix添加到其他列，则应解决此问题。

我认为使用.col-xx-pull-x和.col-xx-push-x类可以获得更好的结果来完成同样的事情。有关详细信息，请参阅网格文档“列排序”部分。

Bootstrap 3 div col-right在移动视图中无法正常工作

2 个答案:

Bootply