Bootstrap фиксированная позиция в столбцах сетки - PullRequest
Новая
       95

Bootstrap фиксированная позиция в столбцах сетки

0 голосов
/ 13 июля 2020

Меня попросили посмотреть некоторые bootstrap, я раньше не работал с BS.

Что мне нужно изменить, чтобы достичь следующего:

При нажатии кнопки я хочу две таблицы, таблица данных слева и таблица справа. Таблица справа должна оставаться фиксированной, в то время как левая таблица может быть прокручена.

Пожалуйста, дайте 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>

введите описание изображения здесь

Ответы [ 2 ]

2 голосов
/ 16 июля 2020

Вложенный макет сетки должен выглядеть следующим образом: 

 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/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>
0 голосов
/ 16 июля 2020

Вы можете сделать что-то вроде этого с липким позиционированием: Пример 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/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>
...