как уменьшить ширину фонового цвета текста?

Question

введите описание изображения здесь

Как уменьшить ширину цвета фона так, чтобы вместо увеличения ширины всего столбца на bootstrap, это была примерно только длина текста?

Для справки у меня есть свойства фона, такие как цвет и радиус границы, в том же теге <p>, что и текст

Вот что у меня есть прямо сейчас

Answer 1

Вы должны использовать такой элемент, как <span>, который имеет предопределенный display: inline, или добавить display: inline или display: inline-block к существующему элементу, например:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
  <p class="bg-primary text-white" style="display: inline-block">January 2020 - March 2020</p>
</div>

или

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
  <span class="bg-primary text-white">January 2020 - March 2020</span>
</div>

Оба результата дают один и тот же результат:

Скриншот результата

Answer 2

Один из способов сделать это - добавить диапазон и добавить свой фоновый цвет к классу диапазона.

<p class="myTag">
    <span class="highlight">hello</span>
</p>

И ваш css будет

.highlight{
  background-color: blue;
}

Или вы можете просто изменить стиль отображения вашего класса p-тегов следующим образом:

<p class="myTag">hello</p>

И ваш css будет

.myTag{
    background-color: blue;
    display: inline-block;
}

Answer 3

вместо добавления цвета фона к столбцу добавьте цвет фона к самому тексту, затем вы можете добавить отступы к пробелу.

например:

<div class="col">
<p class="text-primary">.text-primary</p>
</div>