Блог

Главная - Вопросы по программированию - Почему Bootstrap 5 добавляет разрыв строки после тега span?

Почему Bootstrap 5 добавляет разрыв строки после тега span?

#html #css #line-breaks #bootstrap-5

Вопрос:

Были заданы аналогичные вопросы, но они не затрагивают очень простой пример проблемы. Учитывая приведенный ниже код, разрыв строки будет добавлен после закрывающего тега span, если используется начальная загрузка 5. Это не относится к ванильному HTML, HTML5 или при использовании более ранних версий начальной загрузки. Кто-нибудь знает, что изменилось в Bootstrap 5, что вызывает это?

Я могу достаточно легко обойти проблему, заключив промежуток и последующий текст в абзац со стилем=»дисплей:встроенный», но мне очень любопытна эта проблема.

 <!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">


<!-- HTML -->
<div class="container" style="width: 100%; height: 100%; border-style: none;">
  <div class="row" style="border-style: solid;">
    <span style="font-weight: bold">Editing User #</span>2, david
  </div>
</div>

Ответ №1:

Это потому , что вы помещаете его в row , без col 

 <!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">


<!-- HTML -->
<div class="container" style="width: 100%; height: 100%; border-style: none;">
  <div class="row" style="border-style: solid;">
    <div class="col">
    <span style="font-weight: bold">Editing User #</span>2, david
    </div>
  </div>
</div>

Комментарии:

1. Большое спасибо, Лоуренс! Я не знаю, почему я этого не видел. Я надеюсь, что этот вопрос поможет кому-то другому.

Метки: