物化 CSS 垂直標簽位置

Question

我已經使用 materialize CSS 創建了垂直選項卡，但我無法做的是定位。 我想要這樣的結果。 單擊 TAB 3 時，內容應從同一級別開始。

這是我的 HTML

<div class="container">
  <div class="row">
    <div class="col m4">
      <ul class="tabs">
        <li class="tab"><a href="#test1">Tab 1</a></li>
        <li class="tab"><a class="active" href="#test2">Tab 2</a></li>
        <li class="tab"><a href="#test3">Tab 3</a></li>
        <li class="tab"><a href="#test4">Tab 4</a></li>
        <li class="tab"><a href="#test5">Tab 5</a></li>
        <li class="tab"><a href="#test6">Tab 6</a></li>
      </ul>
    </div>
    <div class="col m8">
      <div id="test1" class="col tab-content">Tab 1</div>
      <div id="test2" class="col tab-content">Tab 2</div>
      <div id="test3" class="col tab-content">Tab 3</div>
      <div id="test4" class="col tab-content">Tab 4</div>
      <div id="test5" class="col tab-content">Tab 4</div>
      <div id="test6" class="col tab-content">Tab 4</div>
    </div>
  </div>
</div>

和 CSS

.tabs{
height: auto;
white-space: normal;
}
.tab{
display: block;
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
.tab-content{
height: 200px;
width: 100%;
background: #fcfcfc;
border:1px solid #f0f0f0;
}
.indicator{
display: none;
}

Answer 1

對於那些只想使用極端簡單選項卡的人，別無其他，請使用此鏈接我的簡單物化 css 垂直選項卡

對於那些想要使用類似於我的 css 樣式的高級全頁 css 布局的人，請使用此鏈接這是我的工作代碼筆

這個想法是原來的materializedcss 1.0.0不支持垂直制表符！！！

他們不會這樣做，您必須修改原始選項卡 css 的覆蓋以將其轉換為垂直

如何？ 查看我的 scss，您必須先將其編譯為 css，然后再添加到您的樣式標簽

.tabs-vertical {
.tabs {
    height: auto;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    display: -webkit-flex;
    display: flex;
  
}

.tab {
    width: 100%;

    .active {
        -moz-transition: border-color .5s ease;
        -o-transition: border-color .5s ease;
        -webkit-transition: border-color .5s ease;
        transition: border-color .5s ease;
        border-right: 3px solid #424242;
    }

    :hover {
        border-right: 3px solid #eeeeee;
    }
}

.indicator {
    display: none;
}

    .tab-content {
    display : none
  }

    > .tab-content .active{
    display : block
  }
}