twitter-bootstrap 如何使用 twitter bootstrap 创建侧边栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15159959/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a side bar using twitter bootstrap
提问by Saurabh Kumar
I want to create a side navigation which looks similar like follows in the snapshot using twitter bootstrap. The special thing here to note is if the name of the label is big...it converts into "...." and not showing it completely and going to different line. Also the entire list must be scrolling if possible. Anybody has got any idea how to achieve it.
我想使用 twitter bootstrap 创建一个侧面导航，它看起来类似于快照中的以下内容。这里要特别注意的是，如果标签的名称很大...它会转换为“....”而不完全显示并转到不同的行。如果可能，整个列表也必须滚动。任何人都知道如何实现它。
采纳答案by James Adam
Well, the documentation describes this pretty well: http://twitter.github.com/bootstrap/components.html#navs
嗯，文档很好地描述了这一点：http: //twitter.github.com/bootstrap/components.html#navs
I use a side navigation bar on one of my web apps - basically using bootstrap's grid layout you create two columns. One smaller one on the left for your nav bar, and one on the right for your main content. This is also in the documentation: http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
我在我的一个网络应用程序上使用侧导航栏 - 基本上使用引导程序的网格布局创建两列。左侧较小的一个用于导航栏，右侧的一个用于主要内容。这也在文档中：http: //twitter.github.com/bootstrap/scaffolding.html#gridSystem
回答by Troy Morehouse
Add the class "navbaritem-ellipsis" to your LI's, and add this to your CSS file:
将类“navbaritem-ellipsis”添加到您的 LI 中，并将其添加到您的 CSS 文件中：
li.navbaritem-ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: no-wrap;
}
no-wrap tells the browser to not wrap the text to the next line. ellipses instructs the brower to add the "..." to the end of the text if it is too big.
no-wrap 告诉浏览器不要将文本换行到下一行。如果文本太大，省略号指示浏览器将“...”添加到文本末尾。
