引导程序在网格列中固定位置

问题描述 投票：0回答：2

我被要求看一些引导程序，我以前没有使用过 BS。

我需要改变什么才能实现以下目标：

单击按钮时，我想要两个表，左边一个数据表，右边一个表。右侧的表格应保持固定，而左侧的表格可以滚动。

请给出一个 bootStrap 答案，因为 BS 应该能够在没有 CSS flex 或类似的情况下自行完成我需要的事情

到目前为止的尝试。

const data = []
for (let i = 0; i < 50; i++) data.push({
  title: "title " + i,
  time: "00:00:" + String(i).padStart(2, '0')
})
$("#load").on("click", () => {
  $("#table1Div").show()
  $("#table2Div").show()
  $("#explanationDiv").hide();
  $("#table1").bootstrapTable({
    data: data
  })
})
#table1Div {
  display: none;
}

#table2Div {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<h1 class="font_3" style="line-height:1.1em;">Title</h1>
<div id="container">
  <div class="col-sm">
    <div class="row" id="explanationDiv">
      <div class="col-sm">
        Explanation
      </div>
      <div class="col-sm">
        Some action
        <button id="load">Load</button>
      </div>
    </div>
    <div class="row">
      <div class="col-sm" id="table1Div">
        <table id="table1" data-toolbar="#toolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" data-sortable="true" data-show-footer="true" class="table table-bordered table-striped">
          <thead id="thead1">
            <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
              <th data-field="time" data-halign="center" data-align="center" data-sortable="true" data-searchable="true">Duration</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
  <div class="col-sm position-fixed" id="table2Div">
    <table id="table2" data-toolbar="#dtoolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" class="table table-bordered table-striped">
      <thead id="thead2">
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
          <th data-field="time" data-halign="center" data-align="center" data-footer-formatter="timeFormatter" data-sortable="true" data-searchable="true">Duration</th>
        </tr>
      </thead>
    </table>
  </div>
</div>

bootstrap-4 bootstrap-table
2个回答
2
投票

网格嵌套布局应遵循：

 container
  |-row
     |- col-sm (50% width)
        |- #table1
     |- col-sm (50% width)
        |- #table2 (fixed-positioned)

你的位置固定应该放在右边的桌子上。

const data = []
for (let i = 0; i < 50; i++) {
  data.push({
    title: "title " + i,
    time: "00:00:" + String(i).padStart(2, '0')
  });
}

$("#load").on("click", () => {
  $("#table1Div").show()
  $("#table2Div").show()
  $("#explanationDiv").hide();
  $("#table1").bootstrapTable({
    data: data
  })
})
#table1Div {
  display: none;
}

#table2Div {
  display: none;
}

#table2 {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<h1 class="font_3" style="line-height:1.1em;">Title</h1>
<div class="container">
  <div class="row">
    <div class="col-sm" id="explanationDiv">
      <div class="row">
        <div class="col-sm">
          Explanation
        </div>
        <div class="col-sm">
          Some action
          <button id="load">Load</button>
        </div>
      </div>
    </div>

    <div class="col-sm" id="table1Div">
      <table id="table1" data-toolbar="#toolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" data-sortable="true" data-show-footer="true" class="table table-bordered table-striped">
        <thead id="thead1">
          <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
            <th data-field="time" data-halign="center" data-align="center" data-sortable="true" data-searchable="true">Duration</th>
          </tr>
        </thead>
      </table>
    </div>

    <div class="col-sm" id="table2Div">
        <table id="table2" data-toolbar="#dtoolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" class="table table-bordered table-striped">
          <thead id="thead2">
            <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
              <th data-field="time" data-halign="center" data-align="center" data-footer-formatter="timeFormatter" data-sortable="true" data-searchable="true">Duration</th>
            </tr>
          </thead>
        </table>
      </div>
  </div>
</div>

0
投票

您可以通过粘性定位执行类似的操作：Codepen 示例

#table2-cont {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height:10em;
}

.row {
  height: 100%;
}

#table1 {
  height: 40em;
  overflow-y:auto;
}

body,html {
  position: relative;
  height:100%;
}
<html>
  <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
  </head>
  <body>
    <h1 class="font_3" style="line-height:1.1em;">Title</h1>
<div class="container-fluid">
  <div class="row">
    <div class="col-12 d-flex justify-content-center" id="explanationDiv">
        <button id="load">Load</button>
    </div>
    <div class="col-6" id="table1-cont">
        <table data-toggle="table" id="table1" data-toolbar="#toolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" data-sortable="true" data-show-footer="true" class="table table-bordered table-striped">
          <thead id="thead1">
            <tr>
              <th data-field="state" data-checkbox="true"></th>
              <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
              <th data-field="time" data-halign="center" data-align="center" data-sortable="true" data-searchable="true">Duration</th>
            </tr>
          </thead>
        </table>
    </div>
    <div class="col-6" id="table2-cont">
          <table data-toggle="table" id="table2" data-toolbar="#dtoolbar" data-search="true" data-custom-search="customSearch" data-show-toggle="true" data-show-columns="true" class="table table-bordered table-striped">
      <thead id="thead2">
        <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="title" data-sortable="true" data-searchable="true">Title</th>
          <th data-field="time" data-halign="center" data-align="center" data-footer-formatter="timeFormatter" data-sortable="true" data-searchable="true">Duration</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
</div>
  </body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.