如何使用bootstrap制作两个左侧导航栏？

时间：2017-12-04 21:08:06

标签： twitter-bootstrap alignment navbar

我正在尝试制作一个简单的设计，包括两个左列，每个列包含一个导航栏和一个带有内容的右列。 我尝试了很多东西，但每次遇到问题时都会：

  • 我的列不会停留在我的页面左侧（我希望两列保持固定大小，内容列流体占据其余部分 页）
  • 我的列重叠
  • 内容与内容重叠

我无法弄清楚出了什么问题。这是我想要获得的：

enter image description here

这是我实际代码的示例

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

您混合了一些未正确关闭的标签。

  • 您不需要这么多容器元素。你可以将一个作为最外层的元素。
  • 您是否故意使用抵消？看看我使用了哪些列类。
  • 第二个导航栏未正确关闭

我试图让这个例子保持简单。点击“运行代码剪切”并尝试整页查看结果。

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

答案 1 :(得分：0)

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>

相关问题
最新问题