Макет начальной загрузки для нескольких делений со смещением - PullRequest
Новая
       15

Макет начальной загрузки для нескольких делений со смещением

0 голосов
/ 05 апреля 2019

Я хочу создать html-страницу с первой строкой, которая имеет боковое меню и div для отображения метрик KPI.Я бы хотел, чтобы этот показатель KPI был исправлен.

Ниже этой метрики KPI приведен div для таблиц.Теперь, когда пользователь прокручивает таблицу, div метрик KPI всегда должен быть фиксированным.Я также хотел бы знать, как выровнять div метрик KPI и выравнивание div таблицы с правой стороны.Я подумал, что мог бы добавить position : fixed для KPI div.Но не уверен, как выровнять div таблицы по правой стороне. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">

  <p>KPI DIV TO BE FIXED</p>
  <div class="row row-no-gutters">
    <div class="col-sm-4" style="background-color:lavender;">SIDEBAR</div>
    <div class="col-sm-8" style="background-color:lavenderblush;">KPI DIV</div>
  </div>
  <br>
  <p>TABLE DIV BELOW KPI DIV</p>
  <div class="row">

    <div class=" offset-md-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>
  </div>
</div>

</body>
</html>

1 Ответ

0 голосов
/ 07 апреля 2019

Вот вам начало: https://codepen.io/panchroma/pen/zXBVRp

Мне не ясно, куда вам нужно идти отсюда, хотя. Дай мне знать, если тебе еще понадобится помощь.

HTML-код очень близок к тому, что вы опубликовали, мои единственные изменения - в строках 21 и 23, где я изменил классы. 

<div class="row row-no-gutters">

<div class=" col-md-offset-4 col-md-8" style="background-color:lavenderblush;">TABLE DIV</div>

Удачи!

...