Question

我只想下拉表格标签，以便表格适合页面正文。

您可以看到，在上图中，表格或容器的顶部隐藏了（即，它与nav标签重叠）。

index.html

<body id="page-top" class="index">
    <!-- Navigation -->
    <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
                <a class="navbar-brand" href="#page-top">Story Box</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <!-- <li class="page-scroll">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li> -->
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- Header -->

    <div class="container" tabindex="0" id="body-container">
        <div class="row col-lg-offset-5">
            <div class="form-group col-lg-12">
                <button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal">
                    <span class="glyphicon glyphicon-plus"></span>
                              Create
                </button>
            </div>
        </div>

        <table id="story-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Audio</th>
                    <th>Video</th>
                    <th>Description</th>
                    <th>Created At</th>
                </tr>
            </thead>

            <tbody>
              {% for story in stories %}
                <tr>
                    <td>{{ story.name }}</td>
                    <td>{{ story.image }}</td>
                    <td>{{ story.audio or 'N/A' }}</td>
                    <td>{{ story.video or 'N/A'}}</td>
                    <td>{{ story.description }}</td>
                    <td>{{ story.created_at }}</td>
                </tr>
              {% endfor %}
            </tbody>
        </table>
    </div>
    </body>

main.css

#body-container{
  margin-bottom: 120px;
  padding-top: 150px;
  max-height: 600px;
}

Answer 1

您可以尝试这样的事情：

逻辑：

将您的表格设为position: absolute。这将允许您移动此表而不会影响其他元素。
点击后，切换top的值。此外，由于您需要幻灯片效果，因此可以使用.animate。

注意：出于演示目的，我添加了一个临时类visible并根据此值返回top值。您可以使用任何标记机制来实现此

JSFiddle

＆＃13;

$(".navbar-toggle").on("click", function() {
  var top = getTopValue($("#story-table"));
  $("#story-table").animate({
    top: top
  }, 400).toggleClass("visible")
})

function getTopValue(el) {
  return (!el || el.hasClass("visible") ? "-100" : "100") + "px"
}

$("#story-table").css({
  top: getTopValue()
});

＆＃13;

#body-container {
  margin-bottom: 120px;
  padding-top: 150px;
  max-height: 600px;
}

#story-table {
  position: absolute;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body id="page-top" class="index">
  <!-- Navigation -->
  <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
        <a class="navbar-brand" href="#page-top">Story Box</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li class="hidden">
            <a href="#page-top"></a>
          </li>
          <!-- <li class="page-scroll">
                        <a href="#portfolio">Portfolio</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#about">About</a>
                    </li>
                    <li class="page-scroll">
                        <a href="#contact">Contact</a>
                    </li> -->
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>

  <!-- Header -->

  <div class="container" tabindex="0" id="body-container">
    <div class="row col-lg-offset-5">
      <div class="form-group col-lg-12">
        <button class="btn btn-success btn-lg" href="#createModal" class="portfolio-link" data-toggle="modal">
                    <span class="glyphicon glyphicon-plus"></span>
                              Create
                </button>
      </div>
    </div>

    <table id="story-table" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Image</th>
          <th>Audio</th>
          <th>Video</th>
          <th>Description</th>
          <th>Created At</th>
        </tr>
      </thead>

      <tbody>
        {% for story in stories %}
        <tr>
          <td>{{ story.name }}</td>
          <td>{{ story.image }}</td>
          <td>{{ story.audio or 'N/A' }}</td>
          <td>{{ story.video or 'N/A'}}</td>
          <td>{{ story.description }}</td>
          <td>{{ story.created_at }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</body>

＆＃13;

如何从顶部拉下div容器？

1 个答案:

逻辑：