【问题标题】: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】:

    只需将 linav-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>
        

        【讨论】:

        • 你应该在你的帖子中添加一些解释。
        猜你喜欢
        • 2022-10-24
        • 2020-09-06
        • 1970-01-01
        • 1970-01-01
        • 2021-06-06
        • 2020-12-09
        • 1970-01-01
        • 1970-01-01
        • 2012-09-02
        相关资源
        最近更新 更多