如何删除活动选项卡下的边框答案

【问题标题】：How do I remove the border under the active tab如何删除活动选项卡下的边框
【发布时间】：2020-07-27 11:48:13
【问题描述】：

如何删除活动标签上的下划线？这是密码笔：https://codepen.io/centem/pen/XWmPbVa 我尝试设置 .nav-link.active 的样式，但无济于事。试图让它看起来像实际的文件夹选项卡。谢谢。

<div class="container"
<div class="row row-content">
            <div class="col-12">
                <h2>Charts</h2>
                <ul class="nav nav-tabs">
                    <li class="nav-items">
                        <a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
                            Column Chart
                        </a>
                    </li>
                    <li class="nav-items">
                        <a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
                            Treemap
                        </a>
                    </li>
                    <li class="nav-items">
                        <a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
                            Donut Chart
                        </a>
                    </li>
                    <li class="nav-items">
                        <a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
                            Time Series
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade show active" id="tab1">
                      <h3>Column Chart <small>Lorem ipsum</small></h3>
                        <svg id="chart1" width="900" height="400"></svg>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab2">
                      <h3>Treemap <small>Lorem ipsum</small></h3>
                        <svg id="chart2" width="900" height="400"></svg>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab3">
                        <h3>Donut Chart <small>Lorem ipsum</small></h3>
                        <svg id="chart3" width="900" height="400"></svg>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab4">
                      <h3>Time Series <small>Lorem ipsum</small></h3>
                        <svg id="chart4" width="900" height="400"></svg>
                    </div>
                </div>
            </div>
       </div>
</div>

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

只需将 li 类 nav-items 更改为 nav-item。

说明：没有类nav-items，见Bootstrap 4 all css classes

【讨论】：

【解决方案2】：

只需将nav-items 类更改为nav-item

nav-items 类是无效类，因为不存在。修改后的代码是

<ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
                            Column Chart
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
                            Treemap
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
                            Donut Chart
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
                            Time Series
                        </a>
                    </li>
                </ul>

【讨论】：

【解决方案3】：

Just Copy and Past this Code

如果它不起作用，请告诉我！

<div class="container"
<div class="row row-content">
            <div class="col-12">
                <h2>Charts</h2>
               <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">
                            Column Chart
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tab2" role="tab" data-toggle="tab">
                            Treemap
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tab3" role="tab" data-toggle="tab">
                            Donut Chart
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#tab4" role="tab" data-toggle="tab">
                            Time Series
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane fade show active" id="tab1">
                      <h3>Column Chart <small>Lorem ipsum</small></h3>
                        <svg id="chart1" width="900" height="400"></svg>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab2">
                      <h3>Treemap <small>Lorem ipsum</small></h3>
                        <svg id="chart2" width="900" height="400"></svg>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab3">
                        <h3>Donut Chart <small>Lorem ipsum</small></h3>
                        <svg id="chart3" width="900" height="400"></svg>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab4">
                      <h3>Time Series <small>Lorem ipsum</small></h3>
                        <svg id="chart4" width="900" height="400"></svg>
                    </div>
                </div>
            </div>
       </div>
</div>

【讨论】：

你应该在你的帖子中添加一些解释。