Question

我想在bootstrap中创建一个类似于android中的tablayout。

我正在尝试创建这些标签，就像他们在这里解释一样： https://bootsnipp.com/snippets/featured/bootstrap-line-tabs-by-keenthemes

但我想使用bootstrap 4.0.0。我的代码在这里： https://jsfiddle.net/3y2wgsao/1/

的CSS：

extension Optional: DataConvertible where Wrapped == DataConvertible { ... }

HTML：

/***
Bootstrap Line Tabs by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: 
Licensed under MIT
***/

/* Tabs panel */
.tabbable-panel {
  border:1px solid #eee;
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid #f3565d;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

如您所见，红线不会更改为活动链接。有谁知道为什么会这样？

Answer 1

HTML和CSS中存在几个错误。

看看我开发的小提琴是否是你想要的。

https://jsfiddle.net/3y2wgsao/14/

的CSS：

/* Tabs panel */
.tabbable-panel {
  border:1px solid #eee;
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border-left:0; border-right:0; border-top:0;
  border-bottom: 4px solid transparent;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {


}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {

  background: none !important;
  border-bottom-color: #fbcdcf;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li > a.active {
  border-bottom-color: #f3565d;
  position: relative; display:block;

  color: #333333;
}
.tabbable-line > .nav-tabs > li > a.active > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

HTML：

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="tabbable-panel">
                <div class="tabbable-line">
                    <ul class="nav nav-tabs " id="nav-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="#tab_default_1" data-toggle="tab" role="tab">
                            Tab 1 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_default_2" data-toggle="tab" role="tab">
                            Tab 2 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#tab_default_3" data-toggle="tab" role="tab">
                            Tab 3 </a>
                        </li>
                    </ul>
                    <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade show active" id="tab_default_1" role="tabpanel">
                            <p>
                                I'm in Tab 1.
                            </p>
                            <p>
                                Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
                            </p>
                            <p>
                                <a class="btn btn-success" href="#" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane fade" id="tab_default_2" role="tabpanel">
                            <p>
                                Howdy, I'm in Tab 2.
                            </p>
                            <p>
                                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
                            </p>
                            <p>
                                <a class="btn btn-warning" href="#" target="_blank">
                                    Click for more features...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane fade" id="tab_default_3" role="tabpanel">
                            <p>
                                Howdy, I'm in Tab 3.
                            </p>
                            <p>
                                Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
                            </p>
                            <p>
                                <a class="btn btn-info" href="#" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

由于

Answer 2

现在需要更改CSS选择器，因为active类应用了锚而不是Bootstrap 4中的li ...

https://www.codeply.com/go/xV3CvpV2yy

.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
  border-bottom: 4px solid transparent;
}

.tabbable-line > .nav-tabs > li a:not(.active):hover {
  border-bottom: 4px solid #fbcdcf;
}

.tabbable-line > .nav-tabs > li .active {
  border-bottom: 4px solid #f3565d;
}

Answer 3

在jquery.js下面创建bootstrap.js。检查这个小提琴

https://jsfiddle.net/raj_mutant/3y2wgsao/16/

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="tabbable-panel">
                <div class="tabbable-line">
                    <ul class="nav nav-tabs ">
                        <li class="active">
                            <a href="#tab_default_1" data-toggle="tab">
                            Tab 1 </a>
                        </li>
                        <li>
                            <a href="#tab_default_2" data-toggle="tab">
                            Tab 2 </a>
                        </li>
                        <li>
                            <a href="#tab_default_3" data-toggle="tab">
                            Tab 3 </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_default_1">
                            <p>
                                I'm in Tab 1.
                            </p>
                            <p>
                                Duis autem eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
                            </p>
                            <p>
                                <a class="btn btn-success" href="" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane" id="tab_default_2">
                            <p>
                                Howdy, I'm in Tab 2.
                            </p>
                            <p>
                                Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation.
                            </p>
                            <p>
                                <a class="btn btn-warning" href="" target="_blank">
                                    Click for more features...
                                </a>
                            </p>
                        </div>
                        <div class="tab-pane" id="tab_default_3">
                            <p>
                                Howdy, I'm in Tab 3.
                            </p>
                            <p>
                                Duis autem vel eum iriure dolor in hendrerit in vulputate. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat
                            </p>
                            <p>
                                <a class="btn btn-info" href="" target="_blank">
                                    Learn more...
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Bootstrap tabbing红色下划线不起作用

3 个答案: