So korrigieren Sie die Ausrichtung von Seitennummerierung und Seitenleiste

Hinzufügen von Seitenleiste und Seitenumbruch zu meiner Site, aber es richtet sich nicht wie es sollte. Die Ausrichtung ist immer nervös.So korrigieren Sie die Ausrichtung von Seitennummerierung und Seitenleiste

Hier ist, wie es jetzt aussieht:

before image

ich es aussehen soll:

after image

Hier wird das Snippet:

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

Quelle

2016-12-01 Sebin P Johnson

verwenden wo ist Ihre Seitenleiste in diesem Code? Ich kann nur nav bar sehen –

ich gerade aktualisiert es bitte erneut überprüfen –

da wir mit Bootstrap werden und ich brauche eine Seite von einer Seitenleiste zu trennen und die Inhalte, die wir

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



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

Bootstrap-Raster wird die Breite eines Bildschirms verwenden 12 sein Maximum zu sein, so dass Sie verteilen müssen der Bildschirm von 3 bis 9, dh der obige Code teilt die Seite in zwei Segmente mit jeweils einer maximalen Breite von zwölf innerhalb, dh es ist mehr wie ein verschachteltes Ding. Also haben wir einen Bildschirm mit einem 3-breiten Bildschirm mit Seitenleiste und einem 9-breiten Bildschirm, die für alles andere verwendet werden können, so dass wir es für den Inhalt und die Seitennummer

Quelle

2016-12-05 20:03:18

Da Sie Bootstrap verwenden, hilft es, über die gleichen Gitterklassen wie die Elemente zu verwenden. Wie in:

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

habe ich die Geige mit dieser Idee aktualisiert: https://jsfiddle.net/v7hggx7k/

Hoffe, es hilft!

Quelle

2016-12-01 15:20:39 jpedroribeiro

Sorry, aber es richtet nicht die Seitenleiste und Seitenumbruch. Die Seitenleiste muss auf der Seite mit nichts darunter und Seitenumbruch sollte am Ende der Seite sein –

So korrigieren Sie die Ausrichtung von Seitennummerierung und Seitenleiste

Antwort

Verwandte Themen