我在 dd 元素中有一个内联 ul,如下所示,
现在我正在尝试将“第二”行与选择器匹配,这可能吗?
每行上的元素各不相同(取决于屏幕尺寸),所以当我用 PHP 打印它们时我不能只匹配它们。
我为什么这样做:
我为所有 li
定义了一个 margin-bottom
,我试图为“最后一行”中的元素删除它,否则会有额外的边距。
附上一个最小的例子:
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3">
<dl>
<dt>Title:</dt>
<dd>
<ul class="list-inline">
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
最佳答案
你不能匹配“最后一行”,在这种情况下更是如此,因为它是动态的。但是您可以将负 margin-bottom
应用于 ul
以取消 li
边距:
.container {
background-color:#ccc;
}
.container ul {
margin-bottom:-50px;
}
.container ul li {
margin-bottom:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-3 col-xs-3">
<dl>
<dt>Title:</dt>
<dd>
<ul class="list-inline">
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
<li><a href="#">Item</a></li><li><a href="#">Item</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
<div>Some other content</div>
关于html - 在bootstrap中匹配一个dd的 "last-line",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27064784/