ブートストラップで2つの左のナビゲーションバーを作成するには？

私はナビゲーションバーを含む2つの左の列と内容のある右の列を含む単純な設計をしようとしています。私は多くのことを試してみましたが、毎回、私は問題を抱えている：ブートストラップで2つの左のナビゲーションバーを作成するには？

私の列は、（私は2つの列が固定サイズを離れ、内容欄液撮影したい私のページの左側に滞在していません。私の列が
コンテンツ重なっ
ページの残りの部分は）私が間違っているかを把握することができないコンテンツ

と重なっています。

そして、これは私の実際のコード

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-2"> 
 

 
     <div class="navbar navbar-inverse navbar-fixed-left"> 
 
     <a class="navbar-brand" href="#">BRAND </a> 
 

 
     <ul class="nav navbar-nav"> 
 

 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tralalala1<span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="#">SubMenu</a></li> 
 
       <li><a href="#">RSubMenue</a></li> 
 
       <li><a href="#">BSubMenut</a></li> 
 
       <li><a href="#">SSubMenu</a></li> 
 
      </ul> 
 
      </li> 
 

 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container"> 
 
    <div class="col-md-2 col-md-offset-2"> 
 
    <ul class="nav navbar-nav"> 
 

 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tralalala1<span class="caret"></span></a> 
 
     <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">SubsubMenu</a></li> 
 
      <li><a href="#">SubSubMenu</a></li> 
 
      <li><a href="#">SubSubMenut</a></li> 
 
      <li><a href="#">SubSubMenu</a></li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">SubSub Menu4</a></li> 
 
      <li><a href="#">SubSub Menu5</a></li> 
 

 
     </ul> 
 

 
    </div> 
 

 
    <div class="container container-fluid"> 
 
    <div class="col-md-8 col-md-offset-4"> 
 
     <div> 
 
     <div style="text-align: center;"> 
 
      <img id="TimeLine" src="http://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto/cdn/a123d728-dd6e-46b1-85c2-5907d9fbb488/5b3da9cf-d8b7-41cd-ae02-a414dbde71fc.jpg" orgwidth="1008" orgheight="709" usemap="#image-maps-2017-11-27-071035" alt="TimeLine Demande de Ticketing Generale" 
 
      align="centre" border="0" height="709" width="1008"> 
 
     </div> 
 
     </div> 
 
    </div>

出典

2017-12-04 Lay

あなたは正しく閉じられなかったタグまでのいくつかを混合しました。

多くのコンテナ要素は必要ありません。最も外側の要素として1つを持つことができます。
オフセットを目的に使用していますか？私が使用した列クラスを見てください。
第二にナビゲーションバーが

私は簡単な例を維持しようとしたが正しく閉じられていませんでした。 [Run code snipped]をクリックし、全ページを試して結果を確認してください。私の列がどこ何とか重なって、なぜ見つけることができませんでしたので、オフセット、私が使っていた

<html> 
 
<head> 
 
    <link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
</head> 
 

 
<body> 
 
    
 
    <div class="container-fluid"> 
 

 
    <div class="row"> 
 

 
    <div class="col-sm-2"> 
 

 
     <div class="navbar navbar-inverse navbar-fixed-left"> 
 

 
     <a class="navbar-brand" href="#">BRAND </a> 
 

 
     <ul class="nav navbar-nav"> 
 

 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tralalala1<span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="#">SubMenu</a></li> 
 
       <li><a href="#">RSubMenue</a></li> 
 
       <li><a href="#">BSubMenut</a></li> 
 
       <li><a href="#">SSubMenu</a></li>  
 
      </ul> 
 
      </li> 
 

 
     </ul> 
 

 
    </div> 
 

 
    </div> 
 
    <div class="col-sm-2"> 
 

 
     <ul class="nav navbar-nav"> 
 

 
     <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tralalala1<span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">SubsubMenu</a></li> 
 
      <li><a href="#">SubSubMenu</a></li> 
 
      <li><a href="#">SubSubMenut</a></li> 
 
      <li><a href="#">SubSubMenu</a></li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">SubSub Menu4</a></li> 
 
      <li><a href="#">SubSub Menu5</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 

 
    </div> 
 

 
    <div class="col-sm-8"> 
 
     Content 
 
     <img id="TimeLine" src="http://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto/cdn/a123d728-dd6e-46b1-85c2-5907d9fbb488/5b3da9cf-d8b7-41cd-ae02-a414dbde71fc.jpg" orgwidth="1008" orgheight="709" usemap="#image-maps-2017-11-27-071035" alt="TimeLine Demande de Ticketing Generale" align="centre" border="0" height="709" width="1008"> 
 
    </div> 
 

 
    </div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-12-04 21:26:49 webwelten

。また、なぜ私のメニュー項目の下に「ブランド」が残っているのか理解できません。とりあえずありがとう！ – Lay

OFFICIAL BOOTSTRAP GRID DOCUMENTATIONのサンプルです - より良いアイデアを得るために、この文書を通過してください：これは私が得ることを望むものです以下のクラスの使い方。あなたは、必ずしもすべてとして、あなたのケースでオフセットを使用する必要はありません

container/container-fluid
row
col-sm/col-md/col-lg ....など

同じ行にあります。

ベター同じクラスにそれらのすべてを使用すること、すなわちrow

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-2"> 
 

 
     <div class="navbar navbar-inverse navbar-fixed-left"> 
 
     <a class="navbar-brand" href="#">BRAND </a> 
 

 
     <ul class="nav navbar-nav"> 
 

 
      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tralalala1<span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
       <li><a href="#">SubMenu</a></li> 
 
       <li><a href="#">RSubMenue</a></li> 
 
       <li><a href="#">BSubMenut</a></li> 
 
       <li><a href="#">SSubMenu</a></li> 
 
      </ul> 
 
      </li> 
 

 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <ul class="nav navbar-nav"> 
 

 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Tralalala1<span class="caret"></span></a> 
 
      <ul class="dropdown-menu" role="menu"> 
 
      <li><a href="#">SubsubMenu</a></li> 
 
      <li><a href="#">SubSubMenu</a></li> 
 
      <li><a href="#">SubSubMenut</a></li> 
 
      <li><a href="#">SubSubMenu</a></li> 
 
      <li class="divider"></li> 
 
      <li><a href="#">SubSub Menu4</a></li> 
 
      <li><a href="#">SubSub Menu5</a></li> 
 

 
      </ul> 
 

 
    </div> 
 
    <div class="col-md-8"> 
 
     <div> 
 
     <div style="text-align: center;"> 
 
      <img id="TimeLine" src="http://img.playbuzz.com/image/upload/f_auto,fl_lossy,q_auto/cdn/a123d728-dd6e-46b1-85c2-5907d9fbb488/5b3da9cf-d8b7-41cd-ae02-a414dbde71fc.jpg" orgwidth="1008" orgheight="709" usemap="#image-maps-2017-11-27-071035" alt="TimeLine Demande de Ticketing Generale" 
 
      align="centre" border="0" height="709" width="1008"> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

出典

2017-12-04 21:24:16

ブートストラップで2つの左のナビゲーションバーを作成するには？

答えて

関連する問題