css - 将 Bootstrap 3 Fancy Tab 元素转换为 Bootstrap 4

标签 css twitter-bootstrap

我从 bootsnip 复制了这个 Bootstrap 3 选项卡组件，我能够毫不费力地将它从 Bootstrap 3.2.0 升级到 3.3.7。现在我想使用 Bootstrap 4.1.0 将它集成到我的元素中，但我无法让选项卡居中并获得大部分相同的行为。

Bootstrap 3 HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
    <div class="container text-center">
        <div class="row">
            <div class="col-xs-12" style="padding-bottom: 30px;">
                <p>This is my attempt to make a wonderful snippet posted by
                    <a target="_blank" href="http://www.bootsnipp.com/maridlcrmn">maridlcrmn</a> a little more responsive. You can find the orginal
                    <a target="_parent" href="http://bootsnipp.com/maridlcrmn/snippets/QbEpr">here</a>
                </p>
            </div>
        </div>
    </div>
    <div class="container text-center">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3" role="tabpanel">
                <div class="col-xs-4 col-sm-12">
                    <!-- Nav tabs -->
                    <ul class="nav nav-justified" id="nav-tabs" role="tablist">
                        <li role="presentation" class="active">
                            <a href="#dustin" aria-controls="dustin" role="tab" data-toggle="tab">
                                <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/dustinlamont/128.jpg" />
                                <span class="quote">
                                    <i class="fa fa-quote-left"></i>
                                </span>
                            </a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#daksh" aria-controls="daksh" role="tab" data-toggle="tab">
                                <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/dakshbhagya/128.jpg" />
                                <span class="quote">
                                    <i class="fa fa-quote-left"></i>
                                </span>
                            </a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#anna" aria-controls="anna" role="tab" data-toggle="tab">
                                <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg" />
                                <span class="quote">
                                    <i class="fa fa-quote-left"></i>
                                </span>
                            </a>
                        </li>
                        <li role="presentation" class="">
                            <a href="#wafer" aria-controls="wafer" role="tab" data-toggle="tab">
                                <img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/waferbaby/128.jpg" />
                                <span class="quote">
                                    <i class="fa fa-quote-left"></i>
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-xs-8 col-sm-12">
                    <!-- Tab panes -->
                    <div class="tab-content" id="tabs-collapse">
                        <div role="tabpanel" class="tab-pane fade in active" id="dustin">
                            <div class="tab-inner">
                                <p class="lead">Etiam tincidunt enim et pretium efficitur. Donec auctor leo sollicitudin eros iaculis sollicitudin.</p>
                                <hr>
                                <p>
                                    <strong class="text-uppercase">Dustin Lamont</strong>
                                </p>
                                <p>
                                    <em class="text-capitalize"> Senior web developer</em> at
                                    <a href="#">Apple</a>
                                </p>
                            </div>
                        </div>
    
                        <div role="tabpanel" class="tab-pane fade" id="daksh">
                            <div class="tab-inner">
                                <p class="lead">Suspendisse dictum gravida est, nec consequat tortor venenatis a. Suspendisse vitae venenatis
                                    sapien.
                                </p>
                                <hr>
                                <p>
                                    <strong class="text-uppercase">Daksh Bhagya</strong>
                                </p>
                                <p>
                                    <em class="text-capitalize"> UX designer</em> at
                                    <a href="#">Google</a>
                                </p>
                            </div>
                        </div>
    
                        <div role="tabpanel" class="tab-pane fade" id="anna">
                            <div class="tab-inner">
                                <p class="lead">Nullam suscipit ante ac arcu placerat, nec sagittis quam volutpat. Vestibulum aliquam facilisis
                                    velit ut ultrices.</p>
                                <hr>
                                <p>
                                    <strong class="text-uppercase">Anna Pickard</strong>
                                </p>
                                <p>
                                    <em class="text-capitalize"> Master web developer</em> at
                                    <a href="#">Intel</a>
                                </p>
                            </div>
                        </div>
    
                        <div role="tabpanel" class="tab-pane fade" id="wafer">
                            <div class="tab-inner">
                                <p class="lead"> Fusce erat libero, fermentum quis sollicitudin id, venenatis nec felis. Morbi sollicitudin gravida
                                    finibus.
                                </p>
                                <hr>
                                <p>
                                    <strong class="text-uppercase">Wafer Baby</strong>
                                </p>
                                <p>
                                    <em class="text-capitalize"> Web designer</em> at
                                    <a href="#">Microsoft</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

和 CSS

body {
    padding-top: 60px;
}

.nav.nav-justified>li>a {
    position: relative;
}

.nav.nav-justified>li>a:hover,
.nav.nav-justified>li>a:focus {
    background-color: transparent;
}

.nav.nav-justified>li>a>.quote {
    position: absolute;
    left: 0px;
    top: 0;
    opacity: 0;
    width: 30px;
    height: 30px;
    padding: 5px;
    background-color: #13c0ba;
    border-radius: 15px;
    color: #fff;
}

.nav.nav-justified>li.active>a>.quote {
    opacity: 1;
}

.nav.nav-justified>li>a>img {
    box-shadow: 0 0 0 5px #13c0ba;
}

.nav.nav-justified>li>a>img {
    max-width: 100%;
    opacity: .3;
    -webkit-transform: scale(.8, .8);
    transform: scale(.8, .8);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav.nav-justified>li.active>a>img,
.nav.nav-justified>li:hover>a>img,
.nav.nav-justified>li:focus>a>img {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tab-pane .tab-inner {
    padding: 30px 0 20px;
}

@media (min-width: 768px) {
    .nav.nav-justified>li>a>.quote {
        left: auto;
        top: auto;
        right: 20px;
        bottom: 0px;
    }
}

如何在 bootstrap 4 中获得与上述相同的行为？这是我的代码:

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
            crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
  <div class="container text-center">
    <div class="row">
      <div class="col" style="padding-bottom: 30px;">
        <p>This is my attempt to make a wonderful snippet posted by
          <a target="_blank" href="http://www.bootsnipp.com/maridlcrmn">maridlcrmn</a> a little more responsive. You can find the orginal
          <a target="_parent" href="http://bootsnipp.com/maridlcrmn/snippets/QbEpr">here</a>
        </p>
      </div>
    </div>
  </div>
  <div class="container text-center">
    <div class="row">
      <div class="col" role="tabpanel">
        
        <!-- Nav tabs -->
        <ul class="nav nav-justified justify-content-center" id="nav-tabs" role="tablist">
          <li role="presentation" class="active">
            <a href="#dustin" aria-controls="dustin" role="tab" data-toggle="tab">
              <img class="rounded-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/dustinlamont/128.jpg" />
            </a>
          </li>
          <li role="presentation" class="">
            <a href="#daksh" aria-controls="daksh" role="tab" data-toggle="tab">
              <img class="rounded-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/dakshbhagya/128.jpg" />
            </a>
          </li>
          <li role="presentation" class="">
            <a href="#anna" aria-controls="anna" role="tab" data-toggle="tab">
              <img class="rounded-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg" />
            </a>
          </li>
          <li role="presentation" class="">
            <a href="#wafer" aria-controls="wafer" role="tab" data-toggle="tab">
              <img class="rounded-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/waferbaby/128.jpg" />
            </a>
          </li>
        </ul>
        
        <div class="col">
          <!-- Tab panes -->
          <div class="tab-content" id="tabs-collapse">
            <div role="tabpanel" class="tab-pane fade in active" id="dustin">
              <div class="tab-inner">
                <p class="lead">Etiam tincidunt enim et pretium efficitur. Donec auctor leo sollicitudin eros iaculis sollicitudin.</p>
                <hr>
                <p>
                  <strong class="text-uppercase">Dustin Lamont</strong>
                </p>
                <p>
                  <em class="text-capitalize"> Senior web developer</em> at
                  <a href="#">Apple</a>
                </p>
              </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="daksh">
              <div class="tab-inner">
                <p class="lead">Suspendisse dictum gravida est, nec consequat tortor venenatis a. Suspendisse vitae venenatis sapien.
                </p>
                <hr>
                <p>
                  <strong class="text-uppercase">Daksh Bhagya</strong>
                </p>
                <p>
                  <em class="text-capitalize"> UX designer</em> at
                  <a href="#">Google</a>
                </p>
              </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="anna">
              <div class="tab-inner">
                <p class="lead">Nullam suscipit ante ac arcu placerat, nec sagittis quam volutpat. Vestibulum aliquam facilisis velit ut
                  ultrices.</p>
                <hr>
                <p>
                  <strong class="text-uppercase">Anna Pickard</strong>
                </p>
                <p>
                  <em class="text-capitalize"> Master web developer</em> at
                  <a href="#">Intel</a>
                </p>
              </div>
            </div>

            <div role="tabpanel" class="tab-pane fade" id="wafer">
              <div class="tab-inner">
                <p class="lead"> Fusce erat libero, fermentum quis sollicitudin id, venenatis nec felis. Morbi sollicitudin gravida finibus.
                </p>
                <hr>
                <p>
                  <strong class="text-uppercase">Wafer Baby</strong>
                </p>
                <p>
                  <em class="text-capitalize"> Web designer</em> at
                  <a href="#">Microsoft</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Bootstrap 4 的 CSS 示例:

body {
    padding-top: 60px;
}

.nav.nav-justified>li>a {
    position: relative;
}

.nav.nav-justified>li>a:hover,
.nav.nav-justified>li>a:focus {
    background-color: transparent;
}

.nav.nav-justified>li>a>img {
    box-shadow: 0 0 0 5px #13c0ba;
}

.nav.nav-justified>li>a>img {
    max-width: 100%;
    opacity: .3;
    -webkit-transform: scale(.8, .8);
    transform: scale(.8, .8);
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav.nav-justified>li.active>a>img,
.nav.nav-justified>li:hover>a>img,
.nav.nav-justified>li:focus>a>img {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tab-pane .tab-inner {
    padding: 30px 0 20px;
}

@media (min-width: 768px) {
    
}

最佳答案

首先，在 ul 上使用 justify-content-center

同时删除 left:0;样式来自 .nav.nav-justified>li>a>.quote

改变下面的样式

.nav.nav-justified>li>a>.quote {
    top: 40px;
    right: -1px;
}

用这个更新你的CSS

body {
      padding-top: 60px;
  }

  .nav.nav-justified>li>a {
      position: relative;
  }

  .nav.nav-justified>li>a:hover,
  .nav.nav-justified>li>a:focus {
      background-color: transparent;
  }

  .nav.nav-justified>li>a>img {
      box-shadow: 0 0 0 5px #13c0ba;
  }
  .nav.nav-justified>li.active>a>img,
  .nav.nav-justified>li:hover>a>img,
  .nav.nav-justified>li:focus>a>img {
      opacity: 1;
      -webkit-transform: none;
      transform: none;
      -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .nav.nav-justified>li>a>img {
      max-width: 80%;
      opacity: .3;
      -webkit-transform: scale(.8, .8);
      transform: scale(.8, .8);
      -webkit-transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transition: all 0.3s 0s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }



  .tab-pane .tab-inner {
      padding: 30px 0 20px;
  }

关于css - 将 Bootstrap 3 Fancy Tab 元素转换为 Bootstrap 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49896748/

上一篇：css - 在文本输入元素上禁用用户选择

下一篇：html - 如何添加图像和背景颜色？

相关文章：

html - 删除空白和粘性 div 边缘？

css - 填充已经为零时如何删除 anchor 文本和边框之间的空格？

html - Bootstrap 4 容器流体不需要的边距

html - Bootstrap 页脚元素位置 bottom

javascript - 如何更改点击事件的 Bootstrap 插入符号指向方向

css - 在 2 个不同的 Bootstrap 表上对齐列

php - 提交按钮不居中

javascript - 伪元素的 CSS 动画在 FF 中不起作用

html - 将图像粘贴到 Bootstrap 3 中的页脚顶部

html - 只选择整个页面的第一个标题

©2024 IT工具网  联系我们