Bootstrap 网格列中的固定位置

Question

我被要求看一些bootstrap，我以前没有用过BS。

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

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

请给出一个 bootStrap 的答案，因为 BS 应该能够自己完成我需要的事情而无需 CSS fex 或类似的东西

到目前为止尝试。

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/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.16.0/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>

Answer 1

网格嵌套布局应遵循：

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

你的固定位置应该放在右边table。

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/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.16.0/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>

Answer 2

你可以用粘性定位做这样的事情：Codepen Example

#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/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-table@1.16.0/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>

Bootstrap 网格列中的固定位置

Bootstrap fixed position in grid columns

bootstrap-4

bootstrap-table