物化 CSS 垂直标签位置

Question

I have created vertical tabs with materialize CSS but what I am not able to do is positioning. I want result like this. When clicking on TAB 3, content should be started from same level.

Here is my 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>

And 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

for those who only want use extreme simple tab, nothing else, please use this link my simple materialized css vertial tab

for those who want to use advanced full page css layout similar to my css style please use this link This is my working codepen

The idea is that original materializedcss 1.0.0 do not support vertical tab!!!

They are not going to do so, you must modify overwrite of original tab css to convert it to a vertial

How to? see my scss, you must compile it to css before add to your style tag

.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
  }
}