css - 设置引导网格系统时出现问题

Question

我

/*header */
header {
background: #C0C0C0;
color: black;
height:52px;
}




/*Vertical Tabs*/
.vertical-mdl-tabs {
  margin-top: 30px;
}
.vertical-mdl-tabs .mdl-tabs__tab-bar {
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-bottom: 35px;
  height: inherit;
  border-bottom: none;
  border-right: 1px solid rgba(10, 11, 49, 0.20);
}

.vertical-mdl-tabs .mdl-tabs__tab {
  width: 100%;
  height: 35px;
  line-height: 35px;
  box-sizing: border-box;
  letter-spacing: 2px;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded a.mdl-tabs__tab.is-active {
  border-right: 2px solid #ED462F;
}
.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__tab.is-active:after {
  content: inherit;
  height: 0;
}

.vertical-mdl-tabs.mdl-tabs.is-upgraded .mdl-tabs__panel.is-active, .mdl-tabs__panel {
  padding: 0 30px;
}

.vertical-mdl-tabs.mdl-tabs .mdl-tabs__tab {
  text-align: left;
}

 <!-- *header start * -->
 <header>
<nav class="navbar navbar">
  <ul class="nav navbar-nav">
    <!-- <li><a href="#">Link</a></li> -->
    <img src="assets/images/download.png" width="80" height="50" alt="image">
    <!-- <li><a href="#">Link</a></li> -->
  </ul>
  <p class="navbar-text pull-right" >Rooftop Solar Company in India</p>

</nav>
</header>
<div class="mdl-tabs vertical-mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-grid mdl-grid--no-spacing">
    <div class="mdl-cell mdl-cell--2-col">
        <div class="mdl-tabs__tab-bar">
           <a href="#tab1-panel" class="mdl-tabs__tab is-active">
               <span class="hollow-circle"></span>
                Tab 1
           </a>
           <a href="#tab2-panel" class="mdl-tabs__tab">
                <span class="hollow-circle"></span>
                Tab 2
            </a>
            <a href="#tab3-panel" class="mdl-tabs__tab">
                <span class="hollow-circle"></span>
                Tab 3
            </a>
       </div>
     </div>
     <div class="mdl-cell mdl-cell--6-col">
          <div class="mdl-tabs__panel is-active" id="tab1-panel">
               <div class="row">
                 <div class="col-md-2">
                    Content  summary
                   </div>
                   <div class="col-md-2">
                      <div>
                          <div class='wrapper'>
                            <div class='container' [dragula]='"first-bag"'>
                              <div>You can move these elements between these two containers</div>
                              <div>Moving them anywhere else isn't quite possible</div>
                              <div>There's also the possibility of moving elements around in the same container, changing their position</div>
                            </div>
                            <div class='container' [dragula]='"first-bag"'>
                              <div>This is the default use case. You only need to specify the containers you want to use</div>
                              <div>More interactive use cases lie ahead</div>
                              <div>Make sure to check out the <a href='https://github.com/bevacqua/dragula#readme'>documentation on GitHub!</a></div>
                            </div>
                          </div>
                        </div>
                      </div>

                 <div class="col-md-4">
                    <canvas id="myCanvas" width="200" height="500" style="border:1px solid #000000">                 <canvas id="myCanvas">
                    Your browser does not support the HTML5 canvas tag.
                    </canvas>
                    </canvas>
                </div>

                <div class="col-md-4">
                    <div>
                        <div style="display: block; width: 650px; height: 500px;">
                          <canvas baseChart
                                  [datasets]="barChartData"
                                  [labels]="barChartLabels"
                                  [options]="barChartOptions"
                                  [legend]="barChartLegend"
                                  [chartType]="barChartType"
                                  (chartHover)="chartHovered($event)"
                                  (chartClick)="chartClicked($event)"></canvas>
                        </div>
                        <button (click)="randomize()">Update</button>
                      </div>
                </div>
               </div>
          </div>
          <div class="mdl-tabs__panel" id="tab2-panel">
               Content 2
          </div>
          <div class="mdl-tabs__panel" id="tab3-panel">
                Content 3
          </div>
      </div>
  </div>
</div>

我正在尝试将选项卡内容分成 3 个相等的部分，然后将第一部分进一步划分为 2 个相等的列。 因此，为此我使用 col-md-4 将其转换为三等份。 然后我使用 col-md-2 将第一列内容进一步分成两个相等的列。 我还为选项卡内容使用 Material 设计主题。

Answer 1

不要在 col-md-2 或其他列中使用容器类。容器使用其默认宽度。删除 class="container"并重试