Как получить жесткую границу вокруг некоторых пролетов в начальной загрузке 4?

Question

У меня есть следующий HTML-код в начальной загрузке 4:

<div class="container">
  <div class="border rounded p-1" >
   <span style="background-color:red">m0: [0.17, 0.81]</span> 
   <span style="background-color:yellow">m1: [0.72, 0.80]</span> 
   <span style="background-color:lime">m2: [0.17, 0.21]</span> 
  </div>
</div>

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

Вот jsfiddle: http://jsfiddle.net/darkstarsys/aq9Laaew/255041/

Answer 1

Окружающий элемент div является блочным элементом, поэтому он будет занимать всю ширину.Чтобы решить эту проблему, вы можете изменить этот элемент на встроенный блок.Я сделал это, присвоив div идентификатор wrap и присвоив ему атрибут inline-block в css:

#wrap {
  display: inline-block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div id="wrap" class="border rounded p-1"><span style="background-color:red">m0: [0.17, 0.81]</span> <span style="background-color:yellow">m1: [0.72, 0.80]</span> <span style="background-color:lime">m2: [0.17, 0.21]</span> </div>
</div>