时间戳

首页 > 解决方案 > Bootstrap“拉右”类没有按预期工作

html - Bootstrap“拉右”类没有按预期工作

问题描述

Iam 面临一些与 pull-right 类有关的问题，因为 iam 将锚链接拉到右侧它停止工作

<div class="panel-group">
        <div class="pull-right">
            <a data-toggle="collapse" href=".panel-collapse">Expand all</a>
        </div>
        <div>
            <p class="spantext"> 4 Sections • 12 Lectures • 6h&nbsp;15m total length</p>
        </div>

        <div class="panel">

            <div class="panel-heading">
                <h4 class="panel-title">
                    <a class="float-right" data-toggle="collapse" href="#collapse1">Welcome</a>
                    <p class="spantext spanright">5 Lectures • 6h&nbsp;15m total length</p>
                </h4>

            </div>
            <div id="collapse1" class="panel-collapse collapse">
                <ul class="list-group">
                    <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>One</a></li>
                    <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>Two</a></li>
                    <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>Three</a></li>
                </ul>

            </div>
        </div>

标签： htmlbootstrap-4

解决方案

Bootstrap 4 中的 .pull-left 和 .pull-right 类已被替换为 .float-left 和 .float-right 类。这些实用程序类用于根据各种视口大小向左或向右浮动元素在引导网格上。它使用 CSS float 属性工作。资源

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <div class="panel-group">
      <div class="pull-right">
        <a data-toggle="collapse" href=".panel-collapse">Expand all</a>
      </div>
      <div class="float-right">
        <a data-toggle="collapse" href=".panel-collapse">Expand all</a>
      </div>
      <div>
        <p class="spantext"> 4 Sections • 12 Lectures • 6h&nbsp;15m total length</p>
      </div>
      <div class="panel">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a class="float-right" data-toggle="collapse" href="#collapse1">Welcome</a>
            <p class="spantext spanright">5 Lectures • 6h&nbsp;15m total length</p>
          </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <ul class="list-group">
            <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>One</a></li>
            <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>Two</a></li>
            <li class="list-group-item"><a href=""><i class="fa fa-youtube-play"></i>Three</a></li>
          </ul>
        </div>
      </div>
    </div><!-- You Forgot to close this -->

推荐阅读