如何核对分页和侧边栏的对齐方式

<div class="container-fluid"> 
<div class="row-fluid"> 
    <div class="span2"> 
    <!--Sidebar content--> 
    </div> 
    <div class="span10"> 
    <!--Body content--> 
    </div> 
</div> 
</div>

要将边栏和分页添加到我的网站，但它没有像应该那样对齐。路线总是很麻烦。如何核对分页和侧边栏的对齐方式

这是现在的样子：

before image

我希望它看起来像：

after image

下面是摘录：

https://jsfiddle.net/jishnutp/oow2en4t/

HTML

<body> 

    <!-- Navigation --> 

    <!-- Second navbar for search --> 
    <nav class="navbar navbar-inverse"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Lesyt Logo</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="navbar-collapse-3"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 

      <li><a href="#">Projects</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      <li> 
      <a class="btn btn-default btn-outline btn-circle collapsed" data-toggle="collapse" href="#nav-collapse3" aria-expanded="false" aria-controls="nav-collapse3">Search</a> 
      </li> 
     </ul> 
     <div class="collapse nav navbar-nav nav-collapse slide-down" id="nav-collapse3"> 
      <form class="navbar-form navbar-right" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search" /> 
      </div> 
      <button type="submit" class="btn btn-danger"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button> 
      </form> 
     </div> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
    </nav> 
    <div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span3"> 

     <div class="col-md-3"> 
      <div class="ibox float-e-margins"> 
      <div class="ibox-content"> 
       <div class="file-manager"> 
       <h5>Donations:</h5> 

       <div class="hr-line-dashed"></div> 
       <button class="btn btn-primary btn-block">100%</button> 
       <div class="hr-line-dashed"></div> 
       <h5>Top Novels</h5> 
       <ul class="folder-list" style="padding: 0"> 
        <li><a href=""><i class="fa fa-folder"></i> 1st Novel</a></li> 
        <li><a href=""><i class="fa fa-folder"></i> 2nd Novel</a></li> 
        <li><a href=""><i class="fa fa-folder"></i> 3rd Novel</a></li> 
        <li><a href=""><i class="fa fa-folder"></i> 4th Novel</a></li> 
        <li><a href=""><i class="fa fa-folder"></i> 5th Novel</a></li> 
        <li><a href=""><i class="fa fa-folder"></i> 6th Novel</a></li> 
       </ul> 
       <h5 class="tag-title">Tags</h5> 
       <ul class="tag-list" style="padding: 0"> 
        <li><a href="">wuxia</a></li> 
        <li><a href="">cultivation</a></li> 
        <li><a href="">sliceoflife</a></li> 
        <li><a href="">kingdom</a></li> 
        <li><a href="">weak to strong</a></li> 
        <li><a href="">adult</a></li> 
        <li><a href="">something</a></li> 
        <li><a href="">wuxia</a></li> 
       </ul> 
       <div class="clearfix"></div> 
       </div> 
      </div> 
      </div> 
     </div> 
     </div> 
     <div class="span10"> 
     <div class="portfolioContainer"> 
      <div class="col-sm-6 col-lg-3 col-md-4 webdesign illustrator"> 
      <div class="gal-detail thumb"> 
       <a href="#" class="image-popup" title="Screenshot-1"> 
       <img src="http://www.novelupdates.com/wp-content/uploads/2015/07/lazyking.jpg" class="thumb-img" alt="work-thumbnail"> 
       </a> 
       <h4 class="text-center">Novel x Chapte xxx</h4> 
       <div class="ga-border"></div> 
       <p class="text-muted text-center"><small>Posted By:xxxx on xx/xx/xxxx</small></p> 
      </div> 
      </div> 

      <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign illustrator photography"> 
      <div class="gal-detail thumb"> 
       <a href="#" class="image-popup" title="Screenshot-2"> 
       <img src="http://www.novelupdates.com/wp-content/uploads/2015/07/lazyking.jpg" class="thumb-img" alt="work-thumbnail"> 
       </a> 
       <h4 class="text-center">Novel x Chapte xxx</h4> 
       <div class="ga-border"></div> 
       <p class="text-muted text-center"><small>Posted By:xxxx on xx/xx/xxxx</small></p> 
      </div> 
      </div> 

      <div class="col-sm-6 col-lg-3 col-md-4 webdesign graphicdesign"> 
      <div class="gal-detail thumb"> 
       <a href="#" class="image-popup" title="Screenshot-3"> 
       <img src="http://www.novelupdates.com/wp-content/uploads/2016/07/Dungeon-Defense.jpg" class="thumb-img" alt="work-thumbnail"> 
       </a> 
       <h4 class="text-center">Novel x Chapte xxx</h4> 
       <div class="ga-border"></div> 
       <p class="text-muted text-center"><small>Posted By:xxxx on xx/xx/xxxx</small></p> 
      </div> 
      </div> 

      <div class="col-sm-6 col-lg-3 col-md-4 illustrator photography"> 
      <div class="gal-detail thumb"> 
       <a href="#" class="image-popup" title="Screenshot-4"> 
       <img src="http://www.novelupdates.com/wp-content/uploads/2016/04/568c79c35e76a.jpg" class="thumb-img" alt="work-thumbnail"> 
       </a> 
       <h4 class="text-center">Novel x Chapte xxx</h4> 
       <div class="ga-border"></div> 
       <p class="text-muted text-center"><small>Posted By:xxxx on xx/xx/xxxx</small></p> 
      </div> 
      </div> 

      <div class="col-sm-6 col-lg-3 col-md-4 graphicdesign photography"> 
      <div class="gal-detail thumb"> 
       <a href="#" class="image-popup" title="Screenshot-5"> 
       <img src="http://www.novelupdates.com/wp-content/uploads/2016/04/Battlefield.png" class="thumb-img" alt="work-thumbnail"> 
       </a> 
       <h4 class="text-center">Novel x Chapte xxx</h4> 
       <div class="ga-border"></div> 
       <p class="text-muted text-center"><small>Posted By:xxxx on xx/xx/xxxx</small></p> 
      </div> 
      </div> 

      <div class="col-sm-6 col-lg-3 col-md-4 webdesign photography"> 
      <div class="gal-detail thumb"> 
       <a href="#" class="image-popup" title="Screenshot-6"> 
       <img src="http://www.novelupdates.com/wp-content/uploads/2016/06/v43vnvgqpuar5ymz.jpg" class="thumb-img" alt="work-thumbnail"> 
       </a> 
       <h4 class="text-center">Novel x Chapte xxx</h4> 
       <div class="ga-border"></div> 
       <p class="text-muted text-center"><small>Posted By:xxxx on xx/xx/xxxx</small></p> 
      </div> 
      </div> 
      <div class="paginate" style="width:600px margin-top:20px"> 
      <!-- remove width id you don't need it--> 
      <ul class="pagination"> 
       <li><a href="#" rel="prev" class="page-prev"><span class="glyphicon glyphicon-chevron-left"></span></a></li> 
       <li class="active "><span>1</span></li> 
       <li><a href="#" class=" ">2</a></li> 
       <li><a href="#" class=" ">3</a></li> 
       <li><a href="#" rel="next" class="page-next"><span class="glyphicon glyphicon-chevron-right"></span></a></li> 
      </ul> 
      <div class="clearfix"></div> 
      </div> 
     </div> 

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

CSS

body { 
    background: #eee; 
} 

.file-box { 
    float: left; 
    width: 220px; 
} 

.file-manager h5 { 
    text-transform: uppercase; 
} 

.file-manager { 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
} 

.folder-list li a { 
    color: #666666; 
    display: block; 
    padding: 5px 0; 
} 

.folder-list li { 
    border-bottom: 1px solid #e7eaec; 
    display: block; 
} 

.folder-list li i { 
    margin-right: 8px; 
    color: #3d4d5d; 
} 

.category-list li a { 
    color: #666666; 
    display: block; 
    padding: 5px 0; 
} 

.category-list li { 
    display: block; 
} 

.category-list li i { 
    margin-right: 8px; 
    color: #3d4d5d; 
} 

.category-list li a .text-navy { 
    color: #1ab394; 
} 

.category-list li a .text-primary { 
    color: #1c84c6; 
} 

.category-list li a .text-info { 
    color: #23c6c8; 
} 

.category-list li a .text-danger { 
    color: #EF5352; 
} 

.category-list li a .text-warning { 
    color: #F8AC59; 
} 

.file-manager h5.tag-title { 
    margin-top: 20px; 
} 

.tag-list li { 
    float: left; 
} 

.tag-list li a { 
    font-size: 10px; 
    background-color: #f3f3f4; 
    padding: 5px 12px; 
    color: inherit; 
    border-radius: 2px; 
    border: 1px solid #e7eaec; 
    margin-right: 5px; 
    margin-top: 5px; 
    display: block; 
} 

.file { 
    border: 1px solid #e7eaec; 
    padding: 0; 
    background-color: #ffffff; 
    position: relative; 
    margin-bottom: 20px; 
    margin-right: 20px; 
} 

.file-manager .hr-line-dashed { 
    margin: 15px 0; 
} 

.file .icon, 
.file .image { 
    height: 100px; 
    overflow: hidden; 
} 

.file .icon { 
    padding: 15px 10px; 
    text-align: center; 
} 

.file-control { 
    color: inherit; 
    font-size: 11px; 
    margin-right: 10px; 
} 

.file-control.active { 
    text-decoration: underline; 
} 

.file .icon i { 
    font-size: 70px; 
    color: #dadada; 
} 

.file .file-name { 
    padding: 10px; 
    background-color: #f8f8f8; 
    border-top: 1px solid #e7eaec; 
} 

.file-name small { 
    color: #676a6c; 
} 

ul.tag-list li { 
    list-style: none; 
} 

.corner { 
    position: absolute; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    line-height: 0; 
    border: 0.6em solid transparent; 
    border-right: 0.6em solid #f1f1f1; 
    border-bottom: 0.6em solid #f1f1f1; 
    right: 0em; 
    bottom: 0em; 
} 

a.compose-mail { 
    padding: 8px 10px; 
} 

.mail-search { 
    max-width: 300px; 
} 

.ibox { 
    clear: both; 
    margin-bottom: 25px; 
    margin-top: 0; 
    padding: 0; 
} 

.ibox.collapsed .ibox-content { 
    display: none; 
} 

.ibox.collapsed .fa.fa-chevron-up:before { 
    content: "\f078"; 
} 

.ibox.collapsed .fa.fa-chevron-down:before { 
    content: "\f077"; 
} 

.ibox:after, 
.ibox:before { 
    display: table; 
} 

.ibox-title { 
    -moz-border-bottom-colors: none; 
    -moz-border-left-colors: none; 
    -moz-border-right-colors: none; 
    -moz-border-top-colors: none; 
    background-color: #ffffff; 
    border-color: #e7eaec; 
    border-image: none; 
    border-style: solid solid none; 
    border-width: 3px 0 0; 
    color: inherit; 
    margin-bottom: 0; 
    padding: 14px 15px 7px; 
    min-height: 48px; 
} 

.ibox-content { 
    background-color: #ffffff; 
    color: inherit; 
    padding: 15px 20px 20px 20px; 
    border-color: #e7eaec; 
    border-image: none; 
    border-style: solid solid none; 
    border-width: 1px 0; 
} 

.ibox-footer { 
    color: inherit; 
    border-top: 1px solid #e7eaec; 
    font-size: 90%; 
    background: #ffffff; 
    padding: 10px 15px; 
} 

a:hover { 
    text-decoration: none; 
} 


/* 
Code snippet by maridlcrmn for Bootsnipp.com 
Follow me on Twitter @maridlcrmn 
*/ 

.navbar-brand { 
    position: relative; 
    z-index: 2; 
} 

.navbar-nav.navbar-right .btn { 
    position: relative; 
    z-index: 2; 
    padding: 4px 20px; 
    margin: 10px auto; 
    transition: transform 0.3s; 
} 

.navbar .navbar-collapse { 
    position: relative; 
    overflow: hidden !important; 
} 

.navbar .navbar-collapse .navbar-right>li:last-child { 
    padding-left: 22px; 
} 

.navbar .nav-collapse { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: 0; 
    padding-right: 120px; 
    padding-left: 80px; 
    width: 100%; 
} 

.navbar.navbar-default .nav-collapse { 
    background-color: #f8f8f8; 
} 

.navbar.navbar-inverse .nav-collapse { 
    background-color: #222; 
} 

.navbar .nav-collapse .navbar-form { 
    border-width: 0; 
    box-shadow: none; 
} 

.nav-collapse>li { 
    float: right; 
} 

.btn.btn-circle { 
    border-radius: 50px; 
} 

.btn.btn-outline { 
    background-color: transparent; 
} 

.navbar-nav.navbar-right .btn:not(.collapsed) { 
    background-color: rgb(111, 84, 153); 
    border-color: rgb(111, 84, 153); 
    color: rgb(255, 255, 255); 
} 

.navbar.navbar-default .nav-collapse, 
.navbar.navbar-inverse .nav-collapse { 
    height: auto !important; 
    transition: transform 0.3s; 
    transform: translate(0px, -50px); 
} 

.navbar.navbar-default .nav-collapse.in, 
.navbar.navbar-inverse .nav-collapse.in { 
    transform: translate(0px, 0px); 
} 

@media screen and (max-width: 767px) { 
    .navbar .navbar-collapse .navbar-right>li:last-child { 
    padding-left: 15px; 
    padding-right: 15px; 
    } 
    .navbar .nav-collapse { 
    margin: 7.5px auto; 
    padding: 0; 
    } 
    .navbar .nav-collapse .navbar-form { 
    margin: 0; 
    } 
    .nav-collapse>li { 
    float: none; 
    } 
    .navbar.navbar-default .nav-collapse, 
    .navbar.navbar-inverse .nav-collapse { 
    transform: translate(-100%, 0px); 
    } 
    .navbar.navbar-default .nav-collapse.in, 
    .navbar.navbar-inverse .nav-collapse.in { 
    transform: translate(0px, 0px); 
    } 
    .navbar.navbar-default .nav-collapse.slide-down, 
    .navbar.navbar-inverse .nav-collapse.slide-down { 
    transform: translate(0px, -100%); 
    } 
    .navbar.navbar-default .nav-collapse.in.slide-down, 
    .navbar.navbar-inverse .nav-collapse.in.slide-down { 
    transform: translate(0px, 0px); 
    } 
} 

body { 
    background: #eee; 
} 


/* =========== 
    Gallery 
=============*/ 

.portfolioFilter a { 
    -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); 
    -moz-transition: all 0.3s ease-out; 
    -ms-transition: all 0.3s ease-out; 
    -o-transition: all 0.3s ease-out; 
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); 
    -webkit-transition: all 0.3s ease-out; 
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); 
    color: #333333; 
    padding: 5px 10px; 
    display: inline-block; 
    transition: all 0.3s ease-out; 
} 

.portfolioFilter a:hover { 
    background-color: #228bdf; 
    color: #ffffff; 
} 

.portfolioFilter a.current { 
    background-color: #228bdf; 
    color: #ffffff; 
} 

.thumb { 
    background-color: #ffffff; 
    border-radius: 3px; 
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1); 
    margin-top: 30px; 
    padding-bottom: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    padding-top: 10px; 
    width: 100%; 
} 

.thumb-img { 
    border-radius: 2px; 
    overflow: hidden; 
    width: 100%; 
} 

.gal-detail h4 { 
    margin: 16px auto 10px auto; 
    width: 80%; 
    white-space: nowrap; 
    display: block; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

.gal-detail .ga-border { 
    height: 3px; 
    width: 40px; 
    background-color: #228bdf; 
    margin: 10px auto; 
} 

.paginate { 
    position: relative; 
} 

.pagination>li>a, 
.pagination>li>span { 
    padding: 6px 16px; 
    margin-left: 3px; 
    margin-right: 3px; 
    line-height: 1.42857143; 
    color: #337ab7; 
    background-color: #ECF0F1; 
    border: 0px; 
    font-size: 20px; 
} 

.pagination>li>a.page-prev, 
.pagination>li>span.page-prev, 
.pagination>li>a.page-next, 
.pagination>li>span.page-next { 
    background-color: #1478B8; 
    color: #FFF; 
} 

.pagination>li>a.page-prev, 
.pagination>li>span.page-prev { 
    position: absolute; 
    right: 60px; 
} 

.pagination>li>a.page-next, 
.pagination>li>span.page-next { 
    position: absolute; 
    right: 0px; 
}

来源

2016-12-01 Sebin P Johnson

这里是你的侧栏在这个代码？我只能看到导航栏 –

我刚更新了它，请再次检查 –

，因为我们使用的引导，我需要通过一个工具，我们使用

<div class="col-md-3"> 
    //code for sidebar goes here 
</div> 



<div class="col-md-9"> 
    //code for content and pagination goes here 
</div>

引导网格设置了屏幕的宽度为12为最大，所以你需要分割内容到页面分离屏幕由3到9，即上面的代码将页面分成两段，每段最大宽度为12，即它更像一个嵌套的东西。所以我们有一个屏幕分割与3宽屏与侧栏和9宽度屏幕可用于其他任何东西，所以我们使用它的内容和分页

来源

2016-12-05 20:03:18

由于您使用的引导，它有助于使用相同的网格类如上面的元素。如：

<div class="col-sm-6 col-lg-3 col-md-4 paginate" style="position: relative; margin-top:20px">...</div>

我已经更新了摆弄这样的想法： https://jsfiddle.net/v7hggx7k/

希望它能帮助！

来源

2016-12-01 15:20:39 jpedroribeiro

对不起，但它没有对齐侧栏和分页。侧边栏需要在侧面没有任何东西，分页应该在页面的底部 –

如何核对分页和侧边栏的对齐方式

回答

相关问题