如何根據bootstrap中的特定網格設置選項卡？

Question

我會很高興，如果你可以幫我在一個具體的問題，我沒有找到任何解決方案 。

我必須在bootstrap中製作一個包含水平製表符的網頁。 的問題是，我需要的是第一個選項卡將從 第二電網及以後開始，如下圖所示：

我試着與我的代碼，但沒有按預期工作上面的圖片中：

.nav-tabs-colors { 
 
    background-color: #ececef; 
 
} 
 

 
.edit-app-tabs { 
 
    background-color:#ececef; 
 
} 
 

 
#edit-app-tab { 
 
    background-color:#ececef; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
    <div class="tabbable edit-app-tabs"> 
 
     <ul class="nav nav-tabs nav-tabs-colors"> 
 
      <div class="col-lg-offset-1"><li role="presentation"></li></div> 
 
      <li role="presentation"><a href="#" data-toggle="tab">Tab1</a></li> 
 
      <li role="presentation" class="active"><a href="#edit-app-tab" data-toggle="tab">Tab2</a></li> 
 
      <li role="presentation"><a href="#" data-toggle="tab">Tab3</a></li> 
 
      <li role="presentation"><a href="#" data-toggle="tab">Tab4</a></li> 
 
      <li role="presentation"><a href="#" data-toggle="tab">Tab5</a></li> 
 
      <li role="presentation"><a href="#" data-toggle="tab">Tab6</a></li> 
 
      <li role="presentation"><a href="#" data-toggle="tab">Tab7</a></li> 
 
      <li role="presentation"><a href="#" data-toggle="tab">Tab8</a></li> 
 
     </ul> 
 
    \t <div class="tab-content"> 
 
    \t \t <div id="edit-app-tab" class="tab-pane fade in active"> 
 
    \t \t \t <div class="row"> 
 
    \t \t \t \t <h3>Content Content Content</h3> 
 
    \t \t \t </div> 
 
    \t \t </div> 
 
     </div> 
 
    <div>

能否請你告訴我如何根據具體的電網精確符合標籤？

在此先感謝您的幫助！

EVH671

Answer 1

你可以例如把你的卡口插入一個分壓器COL-MD-偏移-1級

.nav-tabs-colors { 
 
    background-color: #ececef; 
 
} 
 
.edit-app-tabs { 
 
    background-color: #ececef; 
 
} 
 
#edit-app-tab { 
 
    background-color: #ececef; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 

 

 
<div class="tabbable edit-app-tabs"> 
 
    <ul class="nav nav-tabs nav-tabs-colors col-md-offset-1"> 
 
    <div class=""> 
 
     <li role="presentation"></li> 
 
    </div> 
 
    <li role="presentation"><a href="#" data-toggle="tab">Tab1</a> 
 
    </li> 
 
    <li role="presentation" class="active"><a href="#edit-app-tab" data-toggle="tab">Tab2</a> 
 
    </li> 
 
    <li role="presentation"><a href="#" data-toggle="tab">Tab3</a> 
 
    </li> 
 
    <li role="presentation"><a href="#" data-toggle="tab">Tab4</a> 
 
    </li> 
 
    <li role="presentation"><a href="#" data-toggle="tab">Tab5</a> 
 
    </li> 
 
    <li role="presentation"><a href="#" data-toggle="tab">Tab6</a> 
 
    </li> 
 
    <li role="presentation"><a href="#" data-toggle="tab">Tab7</a> 
 
    </li> 
 
    <li role="presentation"><a href="#" data-toggle="tab">Tab8</a> 
 
    </li> 
 
    </ul> 
 
    <div class="tab-content"> 
 
    <div id="edit-app-tab" class="tab-pane fade in active"> 
 
     <div class="row"> 
 
     <h3>Content Content Content</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div>

更多關於格：http://getbootstrap.com/css/#grid 裸記這個偏移量是medum視口中的div 1列。 ，並且將整個佈局用容器，行和列進行正確的結構佈置是明智的。