Question

我在引导程序4中具有以下HTML：

<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一个id换行并在css中为其分配inline-block属性来完成此操作：

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

如何在Bootstrap 4中跨一些跨度获得紧密边界？

1 个答案: