ブートストラップの特定のグリッドに従ってタブを設定するにはどうすればよいですか？

Question

具体的な問題について私が助けてくれるのであれば、私は助けてくれるでしょう。 その解決策はありますか？

私は、水平タブを含むブートストラップでWebページを作成する必要があります。 問題は、私は最初のタブが 第二グリッドからのスタートと下図のように超えたということ必要があるということです。

私は私のコードを試みたが、上の画像で期待どおり何も動作：

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

あなたは私がどのように正確な特定のグリッドに応じてタブを合わせて示していただけますか？

ご協力いただきありがとうございます。心の中でhttp://getbootstrap.com/css/#grid ベア：

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>

グリッド上

詳細に分周器にあなたのタブを入れることができますこのオフセットは、メドゥームビューポートの上の1列のdivであることを示します。 とすると、全体のレイアウトをコンテナ、行、列で適切に構造化することをお勧めします。