跨度在 div 中彼此相邻

Question

我正在使用引导程序，实际上我有这个 html 输出：

我试图实现的是面板是水平滚动的，并且16m Wartezeit 的两个跨度彼此相邻显示。最后，我想将大约 5 个跨度添加到面板并将它们彼此相邻显示，以便用户可以水平滚动面板。我面临的主要问题是，当我添加两个跨度时，由于引导 css，它们的宽度为 100%。 我真的不知道我应该如何将宽度更改为内容所采用的实际宽度？ 在这里你可以看到我的代码：http://bootply.com/94690

还有我的html：

<div class="panel panel-default">
    <div class="panel-heading">
     <span class="glyphicon glyphicon-stats"></span>
      Statistik
    </div>
    <div class="panel-body">
      <span style="text-align:center; display:inline">
      <h4 style="line-height:0">16m</h4>
      <p style="margin-bottom:0px; margin-top:4px;">Wartezeit</p>
      </span>
      <span style="text-align:center; display:inline">
      <h4 style="line-height:0">16m</h4>
      <p style="margin-bottom:0px; margin-top:4px;">Wartezeit</p>
      </span>
    </div>
  </div>

谢谢大家！

Answer 1

我相信 bootstrap 的 ".row" 和 ."col" 会解决你的问题。阅读bootstrap's grid system (click).

类似这样的：live sample here (click)

<div class="panel-body row" style="overflow:scroll">
      <span style="text-align:center;" class="col-xs-6">
      <h4 style="line-height:0">16m</h4>
      <p style="margin-bottom:0px; margin-top:4px;">Wartezeit</p>
      </span>
      <span style="text-align:center;" class="col-xs-6">
      <h4 style="line-height:0">16m</h4>
      <p style="margin-bottom:0px; margin-top:4px;">Wartezeit</p>
      </span>
</div>

但是，我请求您停止使用内联样式。样式属于 css。

根据您的评论更新：

<div class="panel-body">
  <div class="row">
    <span class="col-xs-6">
    <span class="col-xs-6">
  </div>
</div>