twitter-bootstrap - 为主 div 启用水平滚动

Question

我在右侧有一个主 div 和一个侧边栏(用于导航/过滤器)。主 div 用于显示日志文件，在任何情况下都不应写入右侧栏。

问题:当出现没有空格的很长的消息(例如很长的文件路径)时，它将写入我的右侧栏。相反，我希望这个 div 有一个自己的水平滚动条。

代码: 我创建了一个 JSFiddle 来演示问题:https://jsfiddle.net/pu9b5pu2/

这里是关于这两个div的:

<div class="col-xs-9">
         <div class="debug">
            <div class="timestamp">[09:33:04.137] </div>
            <div class="message">BlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaBlaaaaBlaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
         </div>
      </div>

      <!-- Right side bar -->
      <div class="col-xs right-sidebar">
         <div id="title-sidebar">
            <strong id="title">Filters</strong>
         </div>
         <input type="checkbox" id="debug" value="value">
         <label for="debug">Debug messages</label>
      </div>
   </div>

Answer 1

添加overflow: auto;到 .col-xs-9容器。

从您的 JSFiddle 更改此行:

<div class="col-xs-9" style="white-space: normal; word-wrap: break-word; overflow-wrap: break-word;">

对此:

<div class="col-xs-9" style="white-space: normal; word-wrap: break-word; overflow-wrap: break-word; overflow: auto;">

并且可选地，当您一直滚动时文本不会向右对齐，您可以添加 padding-right: 15px;到 .message元素。