Twitter bootstrap 3 如何在yii2中的管理LTE中创建水平滚动条？_Twitter Bootstrap 3_Yii2 Basic App_Adminlte

Twitter bootstrap 3 如何在yii2中的管理LTE中创建水平滚动条？

twitter-bootstrap-3

Twitter bootstrap 3 如何在yii2中的管理LTE中创建水平滚动条？,twitter-bootstrap-3,yii2-basic-app,adminlte,Twitter Bootstrap 3,Yii2 Basic App,Adminlte,我正在使用yii2 basic 我已经安装了管理员LTE，正在工作现在我有了员工积垢。当管理员查看特定员工的视图时，详细信息将水平显示在屏幕外，也就是说，没有水平滚动条来滚动页面以完全查看详细信息如何做到这一点我和AdminLTE也有同样的问题。我通过使用.container fluid{overflow-x:scroll；}重写“container fluid”类的css来解决这个问题。以下是一般示例： <html> <head> <

我正在使用yii2 basic

我已经安装了管理员LTE，正在工作

现在我有了员工积垢。当管理员查看特定员工的视图时，详细信息将水平显示在屏幕外，也就是说，没有水平滚动条来滚动页面以完全查看详细信息

如何做到这一点

我和AdminLTE也有同样的问题。我通过使用

.container fluid{overflow-x:scroll；}

重写“container fluid”类的css来解决这个问题。以下是一般示例：

  <html>
    <head>
      <style>
        .container-fluid {
          overflow-x: scroll;
        }
      </style>
    </head>
    <body class="skin-black sidebar-mini" role="document">
      <div class="wrapper">

        <!-- AdminLTE Main Header here -->

        <!-- AdminLTE Sidebar here -->

        <!-- Content Wrapper. Contains page content -->

        <div class="content-wrapper">
          <section class="content-header">
            <h1>View Employees Header Page</h1>
            <ol class="breadcrumb">
              <li><a href="#">Home</a></li>
              <li class="active">Employees</li>
            </ol>
          </section>
          <section class="content container-fluid">

            <!-- Employees table view with horizontal scrollbar -->

          </section>
        </div>

        <!-- /.content-wrapper -->

        <!-- AdminLTE Footer here -->
      </div>
    </body>
  </html>


.容器液体{
溢出-x：滚动；
}
查看员工标题页

员工

如果您想将水平滚动条启用到body而不是某个div，则必须从adminlte.js中删除下面的代码

并将之前的所有div设置为宽度：100%

Layout.prototype.fix = function () {
// Remove overflow from .wrapper if layout-boxed exists
$(Selector.layoutBoxed + ' > ' + Selector.wrapper).css('overflow', 'hidden');

// Get window height and the wrapper height
var footerHeight  = $(Selector.mainFooter).outerHeight() || 0;
var neg           = $(Selector.mainHeader).outerHeight() + footerHeight;
var windowHeight  = $(window).height();
var sidebarHeight = $(Selector.sidebar).height() || 0;

// Set the min-height of the content and sidebar based on
// the height of the document.
if ($('body').hasClass(ClassName.fixed)) {
  $(Selector.contentWrapper).css('min-height', windowHeight - footerHeight);
} else {
  var postSetHeight;

  if (windowHeight >= sidebarHeight) {
    $(Selector.contentWrapper).css('min-height', windowHeight - neg);
    postSetHeight = windowHeight - neg;
  } else {
    $(Selector.contentWrapper).css('min-height', sidebarHeight);
    postSetHeight = sidebarHeight;
  }

  // Fix for the control sidebar height
  var $controlSidebar = $(Selector.controlSidebar);
  if (typeof $controlSidebar !== 'undefined') {
    if ($controlSidebar.height() > postSetHeight)
      $(Selector.contentWrapper).css('min-height', $controlSidebar.height());
  }
}

})

添加以下内容：

<style>
    .grid-view {
        overflow: auto;
    }
</style>


.网格视图{
溢出：自动；
}

考虑到您的yii2网格视图类是默认的

网格视图