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

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

  •  1
  • 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 年前
        1
  •  1
  •   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>