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

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

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

Вот фотография того, что я только что сказал. Как настроить поля при создании панели мониторинга с помощью CSS и Bootstrap

.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>

добавьте свой код css, иначе мы не сможем помочь.

— 27.04.2018 18:45

@DanielVickers, вы правы, я подумал, что достаточно спросить, так ли обычно поступают люди. Я просто обновил вопрос кодом;)

— 27.04.2018 18:57

css bootstrap-4 styling sidebar dashboard

27.04.2018 18:37

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

849

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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 для изменения размера и т. д., Однако это решает вашу проблему.

Спасибо, Даниэль! Мне нужно улучшить css. Я вижу, что в том порядке, который я искал, было свойство display: inline-block. Я не знал, как им пользоваться.

— 27.04.2018 20:20

27.04.2018 19:09