代码之家 › 专栏 › 技术社区 › Dirk J. Faber

bootstrap4列表组在Firefox中工作,而不是在Chrome或Edge中

twitter-bootstrap css html

Dirk J. Faber · 技术社区 · 6 年前

我使用bootstrap 4 css框架,并使用如下列表组:

<div class="container">
<div class="col-12 col-md-6 col-lg-4">
    <div>
        <div class="list-group">
            <a class="list-group-item list-group-item-action" href="/">Estonian Language</a>
            <br>
            <a class="list-group-item list-group-item-action" href="/">International Winter Program</a>
            <br>
            <a class="list-group-item list-group-item-action" href="/">Literature and Film in Vienna around 1900</a>
            <br>
            <a class="list-group-item list-group-item-action" href="/">Business and Entrepreneurship in the Start-Up Nation</a>
        </div>
    </div>
</div>

这与 bootstrap website

Bootply example here

1 回复 | 直到 6 年前

Millhorn 6 年前

你没有像getbootstrap网站建议的那样使用它。您正在使用div来标识列表组,它是一个ul>li结构。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

推荐文章

xajetin · 导航不更改滚动上的颜色

3 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

3 年前

Bryan Santos · 固定表头与引导

3 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

3 年前

tym · 根据用户偏好显示字段

3 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

3 年前

Pavel · 当验证DIV可见时,引导网格会移动

7 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

7 年前

Alexander David · 折叠卡打开,然后立即再次关闭

7 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

7 年前