html - 在bootstrap中匹配一个dd的 "last-line"

标签 html css twitter-bootstrap

我在 dd 元素中有一个内联 ul,如下所示,

enter image description here

现在我正在尝试将“第二”行与选择器匹配,这可能吗?

每行上的元素各不相同(取决于屏幕尺寸),所以当我用 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/

相关文章:

html - 如何避免两次 float 相同的内容?

html - 如果比屏幕长,IE8 选择下拉列表将不会显示

jquery - bootstrap 2.3.2 affix Bottom 在 affix 和 affix-bottom 之间跳转

javascript - 如何监听跨域图像请求的任何 301/302 重定向状态代码?

javascript - 如何使一个div始终位于 View 的底部并使顶部div根据底部div调整大小?

html - 如何在显示为 :block/none on child elem 的父元素上设置宽度动画

css - 如何让 CodeFlask 代码编辑器样式与 Vuetify 正常工作

vertical-alignment - 如何将 anchor 标记与 div 中的文本垂直对齐?使用内联 block

html - $brand-primary 在 laravel bootstrap 变量中不是全局的

html - 将固定侧边栏和流动内容与推拉类相结合