有没有办法让 twitter bootstrap 中的嵌套列表看起来像一个普通列表，嵌套元素只是缩进(并让它适用于任意深度的嵌套)？默认情况下，嵌套列表看起来像 this :
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two
<ul class="list-group">
<li class="list-group-item">Item 2a</li>
<li class="list-group-item">Item 2b</li>
</ul>
</li>
<li class="list-group-item">Three
<ul class="list-group">
<li class="list-group-item">Item 3a</li>
<li class="list-group-item">Item 3b</li>
</ul>
</li>
</ul>
我怎样才能让这些嵌套列表看起来像这样(或以某种类似的方式):
如果您错过了上面的链接，这里是 JSFiddle:https://jsfiddle.net/7o8rp0kv/1/
最佳答案
嵌套组列表
.just-padding {
padding: 15px;
}
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="just-padding">
<div class="list-group list-group-root well">
<a href="#" class="list-group-item">Item 1</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 1.1</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 1.1.1</a>
<a href="#" class="list-group-item">Item 1.1.2</a>
<a href="#" class="list-group-item">Item 1.1.3</a>
</div>
<a href="#" class="list-group-item">Item 1.2</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 1.2.1</a>
<a href="#" class="list-group-item">Item 1.2.2</a>
<a href="#" class="list-group-item">Item 1.2.3</a>
</div>
<a href="#" class="list-group-item">Item 1.3</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 1.3.1</a>
<a href="#" class="list-group-item">Item 1.3.2</a>
<a href="#" class="list-group-item">Item 1.3.3</a>
</div>
</div>
<a href="#" class="list-group-item">Item 2</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 2.1</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 2.1.1</a>
<a href="#" class="list-group-item">Item 2.1.2</a>
<a href="#" class="list-group-item">Item 2.1.3</a>
</div>
<a href="#" class="list-group-item">Item 2.2</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 2.2.1</a>
<a href="#" class="list-group-item">Item 2.2.2</a>
<a href="#" class="list-group-item">Item 2.2.3</a>
</div>
<a href="#" class="list-group-item">Item 2.3</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 2.3.1</a>
<a href="#" class="list-group-item">Item 2.3.2</a>
<a href="#" class="list-group-item">Item 2.3.3</a>
</div>
</div>
<a href="#" class="list-group-item">Item 3</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 3.1</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 3.1.1</a>
<a href="#" class="list-group-item">Item 3.1.2</a>
<a href="#" class="list-group-item">Item 3.1.3</a>
</div>
<a href="#" class="list-group-item">Item 3.2</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 3.2.1</a>
<a href="#" class="list-group-item">Item 3.2.2</a>
<a href="#" class="list-group-item">Item 3.2.3</a>
</div>
<a href="#" class="list-group-item">Item 3.3</a>
<div class="list-group">
<a href="#" class="list-group-item">Item 3.3.1</a>
<a href="#" class="list-group-item">Item 3.3.2</a>
<a href="#" class="list-group-item">Item 3.3.3</a>
</div>
</div>
</div>
</div>
在 fiddler 上查看:https://jsfiddle.net/u3gd85cj/
嵌套组列表(可折叠)
$(function() {
$('.list-group-item').on('click', function() {
$('.glyphicon', this)
.toggleClass('glyphicon-chevron-right')
.toggleClass('glyphicon-chevron-down');
});
});.just-padding {
padding: 15px;
}
.list-group.list-group-root {
padding: 0;
overflow: hidden;
}
.list-group.list-group-root .list-group {
margin-bottom: 0;
}
.list-group.list-group-root .list-group-item {
border-radius: 0;
border-width: 1px 0 0 0;
}
.list-group.list-group-root > .list-group-item:first-child {
border-top-width: 0;
}
.list-group.list-group-root > .list-group > .list-group-item {
padding-left: 30px;
}
.list-group.list-group-root > .list-group > .list-group > .list-group-item {
padding-left: 45px;
}
.list-group-item .glyphicon {
margin-right: 5px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="just-padding">
<div class="list-group list-group-root well">
<a href="#item-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1
</a>
<div class="list-group collapse" id="item-1">
<a href="#item-1-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.1
</a>
<div class="list-group collapse" id="item-1-1">
<a href="#" class="list-group-item">Item 1.1.1</a>
<a href="#" class="list-group-item">Item 1.1.2</a>
<a href="#" class="list-group-item">Item 1.1.3</a>
</div>
<a href="#item-1-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.2
</a>
<div class="list-group collapse" id="item-1-2">
<a href="#" class="list-group-item">Item 1.2.1</a>
<a href="#" class="list-group-item">Item 1.2.2</a>
<a href="#" class="list-group-item">Item 1.2.3</a>
</div>
<a href="#item-1-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 1.3
</a>
<div class="list-group collapse" id="item-1-3">
<a href="#" class="list-group-item">Item 1.3.1</a>
<a href="#" class="list-group-item">Item 1.3.2</a>
<a href="#" class="list-group-item">Item 1.3.3</a>
</div>
</div>
<a href="#item-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 2
</a>
<div class="list-group collapse" id="item-2">
<a href="#item-2-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 2.1
</a>
<div class="list-group collapse" id="item-2-1">
<a href="#" class="list-group-item">Item 2.1.1</a>
<a href="#" class="list-group-item">Item 2.1.2</a>
<a href="#" class="list-group-item">Item 2.1.3</a>
</div>
<a href="#item-2-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 2.2
</a>
<div class="list-group collapse" id="item-2-2">
<a href="#" class="list-group-item">Item 2.2.1</a>
<a href="#" class="list-group-item">Item 2.2.2</a>
<a href="#" class="list-group-item">Item 2.2.3</a>
</div>
<a href="#item-2-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 2.3
</a>
<div class="list-group collapse" id="item-2-3">
<a href="#" class="list-group-item">Item 2.3.1</a>
<a href="#" class="list-group-item">Item 2.3.2</a>
<a href="#" class="list-group-item">Item 2.3.3</a>
</div>
</div>
<a href="#item-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 3
</a>
<div class="list-group collapse" id="item-3">
<a href="#item-3-1" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 3.1
</a>
<div class="list-group collapse" id="item-3-1">
<a href="#" class="list-group-item">Item 3.1.1</a>
<a href="#" class="list-group-item">Item 3.1.2</a>
<a href="#" class="list-group-item">Item 3.1.3</a>
</div>
<a href="#item-3-2" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 3.2
</a>
<div class="list-group collapse" id="item-3-2">
<a href="#" class="list-group-item">Item 3.2.1</a>
<a href="#" class="list-group-item">Item 3.2.2</a>
<a href="#" class="list-group-item">Item 3.2.3</a>
</div>
<a href="#item-3-3" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-chevron-right"></i>Item 3.3
</a>
<div class="list-group collapse" id="item-3-3">
<a href="#" class="list-group-item">Item 3.3.1</a>
<a href="#" class="list-group-item">Item 3.3.2</a>
<a href="#" class="list-group-item">Item 3.3.3</a>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
在 fiddler 上查看:https://jsfiddle.net/ann7tctp/
关于html - Bootstrap 嵌套列表的一致样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29063244/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
这道题是thisquestion的逆题.给定一个散列，每个键都有一个数组，例如{[:a,:b,:c]=>1,[:a,:b,:d]=>2,[:a,:e]=>3,[:f]=>4,}将其转换为嵌套哈希的最佳方法是什么{:a=>{:b=>{:c=>1,:d=>2},:e=>3,},:f=>4,} 最佳答案 这是一个迭代的解决方案，递归的解决方案留给读者作为练习:defconvert(h={})ret={}h.eachdo|k,v|node=retk[0..-2].each{|x|node[x]||={};node=node[x]}node[
我有一大串格式化数据(例如JSON)，我想使用Psychinruby同时保留格式转储到YAML。基本上，我希望JSON使用literalstyle出现在YAML中:---json:|{"page":1,"results":["item","another"],"total_pages":0}但是，当我使用YAML.dump时，它不使用文字样式。我得到这样的东西:---json:!"{\n\"page\":1,\n\"results\":[\n\"item\",\"another\"\n],\n\"total_pages\":0\n}\n"我如何告诉Psych以想要的样式转储标量？解
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
下面例子中的Nested和Child有什么区别？是否只是同一事物的不同语法？classParentclassNested...endendclassChild 最佳答案 不，它们是不同的。嵌套:Computer之外的“Processor”类只能作为Computer::Processor访问。嵌套为内部类(namespace)提供上下文。对于ruby解释器Computer和Computer::Processor只是两个独立的类。classComputerclassProcessor#Tocreateanobjectforthisc