有时我会使用另一个仪表板模板,例如adminLTE。但现在,我想自己创造。所以,我正在基于这个bootsnip_link的bootstrap教程 。我将为我的app集成这个布局。这是本教程的开发。
<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就在右侧。我知道引导程序有一个col-offset
。
任何帮助它如此欣赏。
答案 0 :(得分:0)
在这里,有太多行,并且将内容分成新行而不是旁边的相同行。
<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>