div中彼此相邻

Question

我正在使用bootstrap，实际上我有这个html输出：

我试图获得的是面板是水平可滚动的，并且16m Wartezeit的两个跨距彼此相邻显示。最后，我想在面板中添加大约5个这样的跨度并将它们彼此相邻显示，以便用户可以在面板上水平滚动。我面临的主要问题是，当我添加两个跨度时，由于bootstrap 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>