Twitter bootstrap 如何在没有js/jquery的情况下为移动版本包装LI标记文本

我正在为我的网站设置面包屑。它具有以下UI。

这里“我的帐户”是在单独的“李”标签。“/查看我的订单历史记录/订单#0005073140”位于单独的“li”标记中。 我需要有以下格式

如果我删除“/Order#0005073140”文本，则“我的帐户/查看我的订单历史记录”将显示在一行。由于此问题适用于移动版本，因此我需要仅为移动版本设置此包装

如果删除DIV标记的宽度，则整个文本将设置为一行，如下所示

它看起来不太好，因为它正在触摸手机的边缘（使用chrome dev工具拍照）

由于这是响应性设计，我需要有这个只有移动版本。 我真的很感谢你的帮助

原始代码在这里

.breadcrumb{
背景色：透明；
}
.面包屑{
填充：8px 15px；
边缘底部：20px；
列表样式：无；
背景色：#F5；
边界半径：4px；
}
.集装箱{
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
ul，ol{
边际上限：0；
边缘底部：10px；
}
身体{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：14px；
线高：1.42857143；
颜色：#333；
背景色：#fff；
}

/订单#0005073140

我不确定您想要的输出。我不清楚

您可以将文本放在它自己的

中，如下所示：

....

<li class="active">
  <a href="/MyAccount/OrderHistory">View My Order History</a>
</li>

<li>Order# 0005073140</li>

请参阅运行演示：

.breadcrumb{
背景色：透明；
}
.面包屑{
填充：8px 15px；
边缘底部：20px；
列表样式：无；
背景色：#F5；
边界半径：4px；
}
.集装箱{
右侧填充：15px；
左侧填充：15px；
右边距：自动；
左边距：自动；
}
ul，
ol{
边际上限：0；
边缘底部：10px；
}
李面包屑{
显示：内联块；
空白：nowrap；
}
.面包屑李：之后{
内容：“/”；
}
身体{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
字体大小：14px；
线高：1.42857143；
颜色：#333；
背景色：#fff；
}

订单#0005073140

在单独的li标签中添加订单可以解决此问题。谢谢Ochi。很高兴我能帮忙：）

.breadcrumb li {
  display: inline-block;
  white-space: nowrap;
}

.breadcrumb li:after {
    content: '/';
}