Как отрегулировать поля при создании Dashboard с помощью CSS и Bootstrap

Question

Я создаю панель администратора с Bootstrap, но не могу заставить поля боковой панели и основной панели работать правильно. Является ли жесткое кодирование полей в файле .css нормальным способом? Например, если у меня есть верхняя панель, я должен использовать margin-top для боковой панели слева со значением высоты верхней панели?

Причина, по которой я спрашиваю, состоит в том, что если я margin-top основной панели с тем же значением, что является разумным, боковая панель также падает еще больше. Кроме того, я не уверен, как установить поле слева от главной панели. Стайлинг сводит с ума.

Вот фотография того, что я только что сказал.

.sidebar {
  position: absolute;
  height: 100%;
  margin-top: 55.6px;
}

.options-container {
  margin-top: 56px;
  margin-left: 780px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />


<main role="main" class="container container-fluid options-container bg-light">
  <div class="row">
    <div class="option col-sm-3">
      <div class="card card-block bg-light">
        <h4>Add Player</h4>
      </div>
    </div>
    <div class="option col-sm-3">
      <div class="card card-block bg-secondary">
        <h4>Add Team</h4>
      </div>
    </div>
    <div class="option col-sm-3">
      <div class="card card-block bg-warning">
        <h4>Add Competition</h4>
      </div>
    </div>
    <div class="option col-sm-3">
      <div class="card card-block bg-danger">
        <h4>Add Referee</h4>
      </div>
    </div>
    <div class="option col-sm-3">
      <div class="card card-block bg-info">
        <h4>Add Stadium</h4>
      </div>
    </div>
  </div>
</main>

<nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div class="list-group">
    <h5 class="players-title">Players</h5>
    <label class="player-item" *ngFor="let player of players" (click)="onSelect(player)">
          <span class="badge">{{player.id}}</span> {{player.name}}
          <app-player-detail [player]="selectedPlayer"></app-player-detail>
        </label>
  </div>
</nav>

Answer 1

Хорошо, у вас есть много работы, чтобы восстановить это, поскольку есть несколько проблем, вы не дали мне весь свой стиль, поэтому я сделал свой собственный:

* {
  padding: 0px;
  margin: 0px;
}

.sidebar {
    height:100vh;
    display:inline-block;
    float:left;
    background: green;
    padding: 20px;
   margin-right: 20px;
   width: 20%;
}

.options-container {
  width: 72%;
   display:inline-block;
  margin-top: 20px;
}

.option {
  display: inline-block;
  margin-right: 10px;
}

.card {
  background: yellow;
  padding: 10px 20px;
  border-radius: 20px;
}

.card h4 {
  line-height: 20px;
  font-size: 16px;
  margin: 0px;
}

<div class="container">
    <main role="main" class="container container-fluid options-container bg-light">
      <div class="row">
        <div class="option col-sm-3">
            <div class="card card-block bg-light">
                <h4>Add Player</h4>
            </div>
        </div>
        <div class="option col-sm-3">
          <div class="card card-block bg-secondary">
            <h4>Add Team</h4>
          </div>
        </div>
        <div class="option col-sm-3">
            <div class="card card-block bg-warning">
                <h4>Add Competition</h4>
            </div>
        </div>
        <div class="option col-sm-3">
            <div class="card card-block bg-danger">
                <h4>Add Referee</h4>
            </div>
        </div>
        <div class="option col-sm-3">
            <div class="card card-block bg-info">
                <h4>Add Stadium</h4>
            </div>
        </div>
      </div>
</main>

<nav class="col-md-2 d-none d-md-block bg-light sidebar">
  <div class="list-group">
    <h5 class="players-title">Players</h5>
        <label class="player-item" *ngFor="let player of players" click)="onSelect(player)">
          <span class="badge">{{player.id}}</span> {{player.name}}
          <app-player-detail [player]="selectedPlayer"></app-player-detail>
        </label>
      </div>
    </nav>
</div>

Вот рабочий код: https://codepen.io/danielvickerssa/pen/rvWvaO

Конечно, это не идеально, так как вы должны использовать flexbox для определения размера и т. Д., Однако это решает проблему, с которой вы столкнулись.