Почему столбцы моей сетки Bootstrap 4 не одинаковой высоты и ширины? - PullRequest
Новая
       83

Почему столбцы моей сетки Bootstrap 4 не одинаковой высоты и ширины?

0 голосов
/ 05 августа 2020

Я использую Bootstrap 4 и хочу сделать вид сетки. Проблема в том, что у моих столбцов разная ширина. Кроме того, высота столбцов не такая, как вы видите на границах. Я читал, что столбцы в Bootstrap 4 должны иметь одинаковую высоту и ширину изначально, но почему-то это не работает для меня. Я был бы рад, если бы мне кто-нибудь помог.

image 

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

Изменить: Я заметил, что эта проблема возникает только в том случае, если содержимое моих столбцов слишком длинное. Например, если описание отображается в две строки. Я не хочу использовать "text-truncate", потому что тогда содержимое не будет отображаться полностью.

Ответы [ 2 ]

0 голосов
/ 05 августа 2020

Через некоторое время я нашел ответ.

Проблема с шириной заключалась в том, что «электронные письма» были слишком длинными и, поскольку они были «одним словом» (без пробелов между ними), они могли не сломался. Поэтому я добавил в свой css следующую строку: 

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

Вы можете решить эту проблему с помощью различных решений, таких как класс .text-truncate из Bootstrap. Это зависит от ваших потребностей и предпочтений.

Для высоты у меня возникли проблемы, потому что я добавил класс .align-items-center в свою строку. Чтобы решить эту проблему, я удалил из него класс и добавил следующие строки в свой css: 

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

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

Это в основном делает то же самое, что и .align-items-center, но напрямую нацелено на столбцы, а не на всю строку.

Вся сетка теперь выглядит так: введите описание изображения здесь

0 голосов
/ 05 августа 2020

Вставьте 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>
...