为什么我的 Bootstrap 4 网格的列的高度和宽度不一样？

Question

我正在使用 Bootstrap 4 并想要制作一个网格视图。问题是我的列没有相同的宽度。此外，列的高度与您在边框上看到的不同。 我读过 Bootstrap 4 中的列本身应该具有相同的高度和宽度，但不知何故它似乎对我不起作用。如果有人可以帮助我，我会很高兴。

这是我的网格的代码。

.grid-header {
  background-color: #002f5a;
  color: white;
  height: 70px;
  font-weight: bold;
  font-size: 14pt;
}

.grid-header .col-sm {
  border: 1px solid white;
  padding: 10px 20px 10px 20px;
}

.grid-row {
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-left: 1px solid lightgray;
}

.grid-column-value {
  padding: 10px 10px 10px 10px;
  border-right: 1px solid lightgray;
}

.grid-filter {
  padding: 10px 0 10px 0;
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-left: 1px solid lightgray;
}

.grid-filter-column {}

.grid-edit-form {
  padding: 10px 0 10px 0;
}

.grid-edit-row {
  padding: 0 15px 0 15px;
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  border-left: 1px solid lightgray;
}

.grid-row.selected,
.grid-row:hover {
  background-color: #002f5a;
  color: white;
}

.grid-action-column {
  float: right;
}

.grid-action-column>.btn {
  margin-right: 10px;
}

.grid-edit-btn {
  background-color: yellow;
}

.grid-edit-btn:hover {
  background-color: #ebd234;
}

.grid-delete-btn {
  background-color: red;
  color: white;
}

.grid-delete-btn:hover {
  background-color: darkred;
  color: white;
}

.grid-edit-form-buttons {
  float: right;
}

.grid-edit-form-buttons>.btn {
  margin-left: 10px;
}

<div class="container-fluid">
  <div class="grid-header row align-items-center">
    <div class="col">Identifier</div>
    <div class="col">Der Name</div>
    <div class="col">Beschreibung</div>
    <div class="col">E-Mail</div>
    <div class="col">Link</div>
    <div class="col">Erstellt am: </div>
    <div class="col"></div>
  </div>
  <div class="grid-filter row">
    <div class="col grid-filter-column">
      <div class="input-group">
        <div class="input-group-prepend"><i class="input-group-text fas fa-filter"></i></div>
        <input type="number" class="form-control" id="inlineFormInputGroup-Id-filter">
      </div>
    </div>
    <div class="col grid-filter-column">
      <div class="input-group">
        <div class="input-group-prepend"><i class="input-group-text fas fa-filter"></i></div>
        <input type="text" class="form-control" id="inlineFormInputGroup-Name-filter">
      </div>
    </div>
    <div class="col grid-filter-column">
      <div class="input-group">
        <div class="input-group-prepend"><i class="input-group-text fas fa-filter"></i></div>
        <input type="" class="form-control" id="inlineFormInputGroup-Description-filter">
      </div>
    </div>
    <div class="col grid-filter-column">
      <div class="input-group">
        <div class="input-group-prepend"><i class="input-group-text fas fa-filter"></i></div>
        <input type="" class="form-control" id="inlineFormInputGroup-EmailAddress-filter">
      </div>
    </div>
    <div class="col grid-filter-column">
      <div class="input-group">
        <div class="input-group-prepend"><i class="input-group-text fas fa-filter"></i></div>
        <input type="" class="form-control" id="inlineFormInputGroup-TestUrl-filter">
      </div>
    </div>
    <div class="col grid-filter-column">
      <div class="input-group">
        <div class="input-group-prepend"><i class="input-group-text fas fa-filter"></i></div>
        <input type="date" class="form-control" id="inlineFormInputGroup-CreatedAt-filter">
      </div>
    </div>
    <div class="col grid-filter-column"></div>
  </div>
  <div class="grid-row row align-items-center" id="grid-row-1">
    <div class="col grid-column-value">1</div>
    <div class="col grid-column-value">Hans</div>
    <div class="col grid-column-value">This is some cool description</div>
    <div class="col grid-column-value">hans.peter@example.net</div>
    <div class="col grid-column-value"><a href="https://www.google.de/">https://www.google.de/</a></div>
    <div class="col grid-column-value">05.08.2020 13:53:25</div>
    <div class="col grid-action-column"><button class="btn grid-edit-btn" onclick="ShowEditRow('http://localhost:5005/Home/CallApi?Id=1', '1');"><i class="fas fa-edit"></i></button><a href="http://localhost:5005/Home/CallApi?Id=1" onclick="return confirm('Are you sure you want to delete this item?');" class="btn grid-delete-btn"><i class="fas fa-trash"></i></a></div>
  </div>
  <div class="grid-row row align-items-center" id="grid-row-2">
    <div class="col grid-column-value">2</div>
    <div class="col grid-column-value">Laura</div>
    <div class="col grid-column-value">This is another cool description</div>
    <div class="col grid-column-value">laura.g@example.net</div>
    <div class="col grid-column-value"><a href="https://www.google.de/">https://www.google.de/</a></div>
    <div class="col grid-column-value">05.08.2020 13:53:25</div>
    <div class="col grid-action-column"><button class="btn grid-edit-btn" onclick="ShowEditRow('http://localhost:5005/Home/CallApi?Id=2', '2');"><i class="fas fa-edit"></i></button><a href="http://localhost:5005/Home/CallApi?Id=2" onclick="return confirm('Are you sure you want to delete this item?');" class="btn grid-delete-btn"><i class="fas fa-trash"></i></a></div>
  </div>
</div>

编辑：我注意到只有在我的专栏内容太长时才会出现此问题。例如。如果描述分两行显示。我不想使用“文本截断”，因为那时内容不会完全显示。

Answer 1

在每行之后插入w-100 以使它们相等。

<div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
</div>

Answer 2

一段时间后我找到了答案。

宽度的问题是“电子邮件”太长了，因为它们是“一个单词”（中间没有空格），所以它们不会被破坏。所以我在我的 css 中添加了以下行：

.grid-column-value {
    ...
    word-break: break-word;
    ...
}

您可以使用不同的解决方案来解决此问题，例如 Bootstrap 中的 .text-truncate 类。这取决于您的需求和偏好。

对于身高我遇到了问题，因为我将 .align-items-center 类添加到我的行中。为了解决这个问题，我从中删除了该类，并在我的 css 中添加了以下几行：

.grid-column-value {
    ...
    display: flex;
    align-items: center;
}

.grid-action-column {
    ...
    display: flex;
    align-items: center;
}

这与.align-items-center 基本相同，但直接针对列而不是整行。

整个网格现在看起来像这样：