时间戳

首页 > 解决方案 > 表响应在引导程序 3 中不起作用

twitter-bootstrap-3 - 表响应在引导程序 3 中不起作用

问题描述

我正在将 bootstrap 3 用于网站项目。我正在尝试创建一个带有响应式表格的页面，以便在表格太大时使用滚动条。我做了一个这样的测试用例：

    <div class="col-md-10">
        <div class="panel panel-default">
            <div class="panel-heading main-color-bg">
                <h3 class="panel-title">بازرسی انجام نشده</h3>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>کد درخواست</th>
                            <th>نام آموزشگاه</th>
                            <th>شماره ملی مؤسس</th>
                            <th>فعالیت گروه</th>
                            <th>شهرستان</th>
                            <th>نام و نام خانوادگی مؤسس</th>
                            <th>کد ملی</th>
                            <th>موبایل</th>
                            <th>شماره تماس آموزشگاه</th>
                            <th>آدرس</th>
                            <th>نمایش جزئیات</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($schools as $school)
                                    <tr>
                                        <td class="translate">{{ $school->id }}</td>
                                        <td>{{ $school->school_name }}</td>
                                        <td class="translate">{{ $school->national_number_founder }}</td>
                                        <td>{{ $activity->group->group_name }}</td>
                                        <td>{{ $school->cities->city_name }}</td>
                                        <td>{{ $school->user->first_name }} {{ $school->user->last_name }}</td>
                                        <td class="translate">{{ $school->user->national_code }}</td>
                                        <td class="translate">{{ $school->user->mobile }}</td>
                                        <td class="translate">{{ $school->phone }}</td>
                                        <td>{{ $school->address }}</td>

                                        <td>
                                            <a href="{{ route('inspection-register.show', ['id' => $school->id]) }}"><span class="glyphicon glyphicon-list-alt"></span></a>
                                            <a href="{{ route('schools-list.index') }}"><span class="glyphicon glyphicon-search"></span></a>
                                        </td>
                                    </tr>
                                @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

现在，问题是它没有添加滚动条，它只是将网站扩展到表格的宽度。

在此处查看屏幕截图：

桌子

我已经看到它在其他几个网站上运行，所以我正在做的事情......是错误的。

标签： twitter-bootstrap-3

解决方案

使用您的代码创建了这支笔，您调整了窗口大小，滚动条会自动出现。我已按原样复制了您的代码，并添加了bootstrap-3依赖项。

代码：

<html>
<head>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <div class="col-md-10">
    <div class="panel panel-default">
      <div class="panel-heading main-color-bg">
        <h3 class="panel-title">بازرسی انجام نشده</h3>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
            <tr>
              <th>کد درخواست</th>
              <th>نام آموزشگاه</th>
              <th>شماره ملی مؤسس</th>
              <th>فعالیت گروه</th>
              <th>شهرستان</th>
              <th>نام و نام خانوادگی مؤسس</th>
              <th>کد ملی</th>
              <th>موبایل</th>
              <th>شماره تماس آموزشگاه</th>
              <th>آدرس</th>
              <th>نمایش جزئیات</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td class="translate">1</td>
              <td>1</td>
              <td class="translate">1</td>
              <td>1</td>
              <td>1</td>
              <td>1</td>
              <td class="translate">1</td>
              <td class="translate">1</td>
              <td class="translate">1</td>
              <td>1</td>
              <td>
                <a href="{{ route('inspection-register.show', ['id' => $school->id]) }}"><span
                  class="glyphicon glyphicon-list-alt"></span></a>
                <a href="{{ route('schools-list.index') }}"><span class="glyphicon glyphicon-search"></span></a>
              </td>
            </tr>
            <tr>
              <td class="translate">2</td>
              <td>2</td>
              <td class="translate">2</td>
              <td>2</td>
              <td>2</td>
              <td>2</td>
              <td class="translate">2</td>
              <td class="translate">2</td>
              <td class="translate">2</td>
              <td>2</td>
              <td>
                <a href="{{ route('inspection-register.show', ['id' => $school->id]) }}"><span
                  class="glyphicon glyphicon-list-alt"></span></a>
                <a href="{{ route('schools-list.index') }}"><span class="glyphicon glyphicon-search"></span></a>
              </td>
            </tr>
            <tr>
              <td class="translate">3</td>
              <td>3</td>
              <td class="translate">3</td>
              <td>3</td>
              <td>3</td>
              <td>3</td>
              <td class="translate">3</td>
              <td class="translate">3</td>
              <td class="translate">3</td>
              <td>3</td>
              <td>
                <a href="{{ route('inspection-register.show', ['id' => $school->id]) }}"><span
                  class="glyphicon glyphicon-list-alt"></span></a>
                <a href="{{ route('schools-list.index') }}"><span class="glyphicon glyphicon-search"></span></a>
              </td>
            </tr>
            <tr>
              <td class="translate">4</td>
              <td>4</td>
              <td class="translate">4</td>
              <td>4</td>
              <td>4</td>
              <td>4</td>
              <td class="translate">4</td>
              <td class="translate">4</td>
              <td class="translate">4</td>
              <td>4</td>
              <td>
                <a href="{{ route('inspection-register.show', ['id' => $school->id]) }}"><span
                  class="glyphicon glyphicon-list-alt"></span></a>
                <a href="{{ route('schools-list.index') }}"><span class="glyphicon glyphicon-search"></span></a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
      integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</body>
</html>

添加overflow-x将使其适用于所有布局

.table-responsive
{
    overflow-x: auto;
}

推荐阅读