使用main_container为模板创建导航栏和边栏

Question

有时我使用另一个控制面板模板，如adminLTE。但现在，我想自己创作。所以，我基于这个bootsnip_link 引导教程。我将为我的应用程序集成此布局。这是本教程的开发。

<div class="container-fluid"> 
<div class="main-content"> 

    <div class="container-fluid" style="margin-top: 20px;"> 
     <div class="row"> 
      <div class="col-sm-4 col-md-3 sidebar"> 
       <div class="mini-submenu"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </div> 

       <div class="list-group"> 
        <span href="#" class="list-group-item active"> 
         Submenu 
         <span class="pull-right" id="slide-submenu"> 
          <i class="fa fa-times"></i> 
         </span> 
        </span> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-comment-o"></i> Lorem ipsum 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-search"></i> Lorem ipsum 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-user"></i> Lorem ipsum 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span> 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span> 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-envelope"></i> Lorem ipsum 
        </a> 
       </div>   
      </div> 
     </div> 


     <div class="row"> 
      <div class="col-lg-12"> 
       <a href="http://[::1]/develop_tresnamuda/admin/groups/create" class="btn btn-primary">Create group</a> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="col-lg-12" style="margin-top: 10px;"> 
       <table class="table table-hover table-bordered table-condensed table-striped"><tr><td>admin</td><td>Administrator</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/1"><span class="glyphicon glyphicon-pencil"></span></a></td></tr><tr><td>managing_director</td><td>Grup untuk Bapak MD</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/19"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/19" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_finance</td><td>Ibu, Rusman</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/20"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/20" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_com_ops</td><td>Hendrik Lengkong</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/21"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/21" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_armada</td><td>Capt Lengkong</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/22"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/22" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_operation</td><td>Grup untuk Bapak Hasan Kamal</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/23"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/23" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_armada</td><td>Grup untuk Bapak Sukardi</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/24"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/24" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_operasi</td><td>Nano, Sitor</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/25"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/25" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_accounting</td><td>Anwar Taufik</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/26"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/26" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_audit</td><td>Awal</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/27"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/27" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_marketing</td><td>Srie, Agnes, Lia, Netty, Olive</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/29"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/29" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_sales</td><td>Ullie</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/30"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/30" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_eskport</td><td>Steven</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/31"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/31" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_import</td><td>Ardan</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/32"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/32" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_inventory</td><td>Bambang</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/33"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/33" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_persum</td><td>Deddy</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/34"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/34" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_billing</td><td>Joko</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/35"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/35" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_impor</td><td>Fatah</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/36"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/36" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_purchasing</td><td>Dahely</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/37"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/37" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_messenger</td><td>Diding</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/38"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/38" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr></table> </div> 
     </div> 
    </div>  
</div> 

<footer class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="container"> 
    <p class="navbar-text pull-left">Say Hi </p> 
    <a class="navbar-btn btn-danger btn pull-right"> Call Us on : 401</a> 
    </div> 
</footer> 

我的问题是，如何才能让侧边栏仍然在屏幕的左侧，而另一个HTML这是最主要的conten是在right.I知道引导有一个col-offset。 任何帮助它如此赞赏。

Answer 1

在这里，你会发现行数太多，并且将内容分成新行而不是旁边的同一行。

<div class="container-fluid"> 
<div class="main-content"> 

    <div class="container-fluid" style="margin-top: 20px;"> 
     <div class="row"> 
      <div class="col-sm-4 col-md-3 sidebar"> 
       <div class="mini-submenu"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </div> 

       <div class="list-group"> 
        <span href="#" class="list-group-item active"> 
         Submenu 
         <span class="pull-right" id="slide-submenu"> 
          <i class="fa fa-times"></i> 
         </span> 
        </span> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-comment-o"></i> Lorem ipsum 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-search"></i> Lorem ipsum 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-user"></i> Lorem ipsum 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span> 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span> 
        </a> 
        <a href="#" class="list-group-item"> 
         <i class="fa fa-envelope"></i> Lorem ipsum 
        </a> 
       </div>   
      </div> 

      <div class="col-sm-8 col-md-9"> 
       <a href="http://[::1]/develop_tresnamuda/admin/groups/create" class="btn btn-primary">Create group</a> 

      <div style="margin-top: 10px;"> 
       <table class="table table-hover table-bordered table-condensed table-striped"><tr><td>admin</td><td>Administrator</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/1"><span class="glyphicon glyphicon-pencil"></span></a></td></tr><tr><td>managing_director</td><td>Grup untuk Bapak MD</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/19"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/19" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_finance</td><td>Ibu, Rusman</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/20"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/20" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_com_ops</td><td>Hendrik Lengkong</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/21"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/21" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_armada</td><td>Capt Lengkong</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/22"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/22" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_operation</td><td>Grup untuk Bapak Hasan Kamal</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/23"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/23" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_armada</td><td>Grup untuk Bapak Sukardi</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/24"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/24" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_operasi</td><td>Nano, Sitor</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/25"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/25" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_accounting</td><td>Anwar Taufik</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/26"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/26" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_audit</td><td>Awal</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/27"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/27" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_marketing</td><td>Srie, Agnes, Lia, Netty, Olive</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/29"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/29" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_sales</td><td>Ullie</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/30"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/30" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_eskport</td><td>Steven</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/31"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/31" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_import</td><td>Ardan</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/32"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/32" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_inventory</td><td>Bambang</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/33"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/33" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_persum</td><td>Deddy</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/34"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/34" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_billing</td><td>Joko</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/35"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/35" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_impor</td><td>Fatah</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/36"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/36" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_purchasing</td><td>Dahely</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/37"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/37" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_messenger</td><td>Diding</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/38"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/38" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr></table> </div> 
     </div> 
    </div>  
</div> 

<footer class="navbar navbar-default navbar-fixed-bottom"> 
    <div class="container"> 
    <p class="navbar-text pull-left">Say Hi </p> 
    <a class="navbar-btn btn-danger btn pull-right"> Call Us on : 401</a> 
    </div> 
</footer> 

https://jsfiddle.net/zw7Lbnp2/1/