Twitter bootstrap 为主div启用水平滚动

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

问题： 当出现一条没有空格的很长的消息（例如长文件路径）时，它将写入我的右侧边栏。相反，我想有一个自己的水平滚动条为这个部门

代码：我创建了一个JSFIDLE，它演示了问题：

这里是关于这两个部门的：

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

[09:33:04.137] 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
过滤器
调试消息

添加

溢出：自动到
.col-xs-9
容器

从JSFIDLE更改此行：


为此：


或者，当你一直滚动时，文本不会向右齐平，你可以添加
padding right:15px到
.message
元素。
添加
溢出：自动到
.col-xs-9
容器

从JSFIDLE更改此行：


为此：


或者，当你一直滚动时，文本不会向右齐平，你可以添加
padding right:15px
到
.message
元素。
您可以使用CSS打断长单词：

.break-word {
  hyphens: auto;// requires lang attribute be set on target element or ancestor
  overflow-wrap: break-word;
  word-wrap: break-word;
}






您可以使用CSS打断长单词：

.break-word {
  hyphens: auto;// requires lang attribute be set on target element or ancestor
  overflow-wrap: break-word;
  word-wrap: break-word;
}






谢谢，这很简单，也感谢填充的想法。我知道如何防止长消息从新的一行开始，而不是从时间戳旁边开始，例如：？谢谢，这很简单，也感谢填充的想法。你知道我该如何防止长消息从新行开始而不是从时间戳旁边开始吗，例如：？