如何使用 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 来调整大小等。但是这解决了您遇到的问题。